プレーン・ジャバスクリプト・カルーセル問題

Question

私は本当に簡単なカルーセルを作りましたが、問題が1つあります。私のカルーセルには、前のボタンと次のボタンの3つのスライドがあります。私が望むのは、次のボタンをクリックして、最初のスライドに行く最後のスライドにあるときです。さらに、前のボタンをクリックすると、最初のスライド上にあり、最後のスライドに移動します。どうすればそれを達成できますか？

おかげ

//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

ここにあなたのコードから作業例です：

//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

これは一例であり、しかし、私はあなたがたくさんあなたのコード:-)を向上させることができると思います。いったん私がカルーセルを作って、その魔法がアクティブなクラスとアニメーションを持っていたら、アクティブなクラスに翻訳を適用して、前のボタンまたは次のボタンの方向を特定することができれば、それを達成します。

//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

現在のスライドを追跡し、それに基づいてtransformプロパティを変更するには、変数を使用します。私は次のボタンの機能を作ったし、前のボタンと同じコンセプトを使うこともできる。

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++; 
}); 

P.S. divにアニメーション化（翻訳）するために必要なさらなる計算を追加するときに、コードで行ったように、既存のCSS変換プロパティにtransformプロパティを追加するのは悪い習慣です。必ず交換してください。