普通JavaScript轮播问题

Question

I have built a really simple carousel but there is one issue. In my carousel i have three slides, a previous button and a next button. What I want is when I click the next button and is on the last slide to go to the first slide. Moreover, when i click the previous button and is on the first slide to go to the last slide. How can i achieve it?

Thanks

  //Main Container var carouseContainer = document.querySelector("#carousel-container"); //Carousel Container var carousel = document.querySelector("#carousel"); //Carousel Children var carouselChildren = document.querySelector("#carousel").children; //Carousel Slides var carouselOne = document.querySelector("#carousel-one") var carouseTwo = document.querySelector("#carousel-two") var carouselThree = document.querySelector("#carousel-three") //Buttons var buttonPrev = document.querySelector("#button-left"); var buttonNext = document.querySelector("#button-right"); buttonNext.addEventListener("click", function(){ for ( i = 0; i < carouselChildren.length; i++) { carouselChildren[i].style.transform +="translateX(-300px)"; carouselChildren[i].style.transition +="all 2s ease"; } }); buttonPrev.addEventListener("click", function(){ for ( i = 0; i < carouselChildren.length; i++) { carouselChildren[i].style.transform +="translateX(300px)"; carouselChildren[i].style.transition +="all 2s ease"; } }); 

  * { margin:0px; padding:0px; box-sizing: border-box; list-style: none; text-decoration: none; } #carousel-container { width:300px; height:300px; overflow: hidden; margin: 0 auto; border:1px solid black; } #carousel { width:900px; height:300px; } #carousel-one, #carousel-two,#carousel-three { width:300px; height:300px; float:left; } #carousel-one { background:red; } #carousel-two { background:green; } #carousel-three { background:blue; } #buttons { text-align: center; margin-top:20px; } button { border:none; color:#fff; padding:10px 20px; display: inline-block; margin-right:20px; cursor: pointer; } 

  <div id="carousel-container"> <div id="carousel"> <div id="carousel-one"> <h1>Carousel One Main Heading</h1> <h2>Carousel One Sub Heading</h2> </div> <div id="carousel-two"></div> <div id="carousel-three"></div> </div> </div> <div id="buttons"> <button id="button-left">Previous</button> <button id="button-right">Next</button> </div> 

Answer 1

Here's a working example from your code:

 //Main Container var carouseContainer = document.querySelector("#carousel-container"); //Carousel Container var carousel = document.querySelector("#carousel"); //Carousel Children var carouselChildren = document.querySelector("#carousel").children; //Carousel Slides var carouselOne = document.querySelector("#carousel-one") var carouseTwo = document.querySelector("#carousel-two") var carouselThree = document.querySelector("#carousel-three") //Buttons var buttonPrev = document.querySelector("#button-left"); var buttonNext = document.querySelector("#button-right"); var current = 0, total = 3; function moveTo(count) { var translate = 'translateX(' + (-300 * current) + 'px)'; for (i = 0; i < carouselChildren.length; i++) { carouselChildren[i].style.transform = translate; } } buttonNext.addEventListener("click", function() { current++; if (current > total - 1) { current = 0; } moveTo(current); }); buttonPrev.addEventListener("click", function() { current--; if (current < 0) { current = total - 1; } moveTo(current); }); 

 * { margin: 0px; padding: 0px; box-sizing: border-box; list-style: none; text-decoration: none; } #carousel-container { width: 300px; height: 300px; overflow: hidden; margin: 0 auto; border: 1px solid black; } #carousel { width: 900px; height: 300px; } #carousel-one, #carousel-two, #carousel-three { width: 300px; height: 300px; float: left; transition: all 2s ease; } #carousel-one { background: red; } #carousel-two { background: green; } #carousel-three { background: blue; } #buttons { text-align: center; margin-top: 20px; } button { border: none; color: #fff; padding: 10px 20px; display: inline-block; margin-right: 20px; cursor: pointer; } 

 <div id="carousel-container"> <div id="carousel"> <div id="carousel-one" class="slide"> <h1>Carousel One Main Heading</h1> <h2>Carousel One Sub Heading</h2> </div> <div id="carousel-two" class="slide"></div> <div id="carousel-three" class="slide"></div> </div> </div> <div id="buttons"> <button id="button-left">Previous</button> <button id="button-right">Next</button> </div> 

Answer 2

This is an example, however, I think you can improve a lot your code :-) . Once I did a carousel and the magic was with the active class and the animation, I mean if you can apply the translate to the active class and identify the direction according to the prev or next button, you will achieve it.

 //Main Container var carouseContainer = document.querySelector("#carousel-container"); //Carousel Container var carousel = document.querySelector("#carousel"); //Carousel Children var carouselChildren = document.querySelector("#carousel").children; //Carousel Slides var carouselOne = document.querySelector("#carousel-one") var carouseTwo = document.querySelector("#carousel-two") var carouselThree = document.querySelector("#carousel-three") //Buttons var buttonPrev = document.querySelector("#button-left"); var buttonNext = document.querySelector("#button-right"); buttonNext.addEventListener("click", function(){ var activeSlide = 0, translate = 'translateX(-300px)'; for ( i = 0; i < carouselChildren.length; i++) { if (carouselChildren[i].className) { activeSlide = i; } carouselChildren[i].style.transform += translate; carouselChildren[i].style.transition +="all 2s ease"; } // remove the active class for the current slide carouselChildren[activeSlide].className = ''; if(activeSlide + 1 >= carouselChildren.length){ carouselChildren[0].className = 'active'; for ( i = 0; i < carouselChildren.length; i++) { carouselChildren[i].style.transform = 'translateX(0px)'; } } else{ carouselChildren[++activeSlide].className = 'active'; } }); buttonPrev.addEventListener("click", function(){ console.log(carouselChildren.length); for ( i = 0; i < carouselChildren.length; i++) { carouselChildren[i].style.transform +="translateX(300px)"; carouselChildren[i].style.transition +="all 2s ease"; } }); 

 * { margin:0px; padding:0px; box-sizing: border-box; list-style: none; text-decoration: none; } #carousel-container { width:300px; height:300px; overflow: hidden; margin: 0 auto; border:1px solid black; } #carousel { width:900px; height:300px; } #carousel-one, #carousel-two,#carousel-three { width:300px; height:300px; float:left; } #carousel-one { background:red; } #carousel-two { background:green; } #carousel-three { background:blue; } #buttons { text-align: center; margin-top:20px; } button { border:none; color:#fff; padding:10px 20px; display: inline-block; margin-right:20px; cursor: pointer; } 

 <div id="carousel-container"> <div id="carousel"> <div id="carousel-one" class="active"> <h1>Carousel One Main Heading</h1> <h2>Carousel One Sub Heading</h2> </div> <div id="carousel-two"></div> <div id="carousel-three"></div> </div> </div> <div id="buttons"> <button id="button-left">Previous</button> <button id="button-right">Next</button> </div> 

Answer 3

Use a variable to keep track of the current slide and change the transform property based on it. I have made the function for the next button and you can use the same concept for the previous button as well.

var currentSlide = 1; // is in first slide
buttonNext.addEventListener("click", function(){
if(currentSlide == 3){ 
 currentSlide = 0;
}
   for (  i = 0; i < carouselChildren.length; i++) {
    carouselChildren[i].style.transform="translateX("+(currentSlide*-300)+"px)";
       carouselChildren[i].style.transition ="all 2s ease"; // you don't need to do this as well if you define it in css file once
   }
currentSlide++;
});

PS It's a bad practice to add transform property to existing css transform property like you did in your code as you are adding further calculations that needs to happen in order to animate (translate) the divs. Always replace them.