comment déplacer automatiquement glisser

Question

Dans mon site, je veux déplacer cette section automatiquement

Pour que ce que je dois faire. Je n'ai aucune idée concernant cette requête. Quelqu'un pourrait m'aider à résoudre cette question.

Answer 1

<script> 
 
for(var i = 0; i < btns.length; i++){ 
 
    btns[i].addEventListener('click', function(){ 
 
    alert('test'); 
 
    }); 
 
} 
 
(function slideshow(){ 
 

 
    var slides = document.getElementById('slides').children; 
 
    var btns = document.getElementById('btns').children; 
 
    var i = 0; 
 

 
    slides[i].style.opacity= '1'; 
 
    btns[i].style.opacity= '1'; 
 
    slides[i].style.zIndex= '999'; 
 

 
    function timer(){ 
 
      i = (i + 1);  
 
      var len = slides.length; 
 
      var previousSlides = slides[ (i+len-1) % len ]; 
 
      var previousBtns = btns[ (i+len-1) % len ]; 
 

 
      if (i % slides.length == 0) { 
 
      i = 0; 
 
      } 
 

 
slides[i].style.opacity= '1'; 
 
      slides[i].style.zIndex= '999'; 
 
      btns[i].style.opacity= '1'; 
 
      previousSlides.style.opacity= '0'; 
 
      previousSlides.style.zIndex= '1'; 
 
      
 
      previousBtns.style.opacity= '0.5'; 
 
     }  
 
     setInterval(timer, 4000); 
 

 
}()); 
 

 

 

 
</script>

<div id="slides"> 
 
    <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> 
 
</div> 
 
<p id="demo"></p> 
 
<div id="btns"> 
 
    <button type="button">Click Me1</button> 
 
<button type="button" >Click Me2</button> 
 
<button type="button" >Click Me3</button> 
 

 
<button type="button">Click Me4</button> 
 
</div>

images Mettez à l'intérieur des diapositives div

Answer 2

Utilisez la fonction de carrousel Bootstrap voir ici https://getbootstrap.com/docs/3.3/examples/carousel/

Voir this link for the actual example:

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
<!-- Indicators --> 
<ol class="carousel-indicators"> 
<li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
<li data-target="#myCarousel" data-slide-to="1"></li> 
<li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
<div class="item active"> 
    <img src="la.jpg" alt="Los Angeles"> 
</div> 

<div class="item"> 
    <img src="chicago.jpg" alt="Chicago"> 
</div> 

<div class="item"> 
    <img src="ny.jpg" alt="New York"> 
</div> 
</div> 

<!-- Left and right controls --> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right"></span> 
<span class="sr-only">Next</span> 
</a> 
</div>