バニラで無限のカルーセルを作るにはどうすればいいですか？

Question

imgSlideEvent(); 
 
function imgSlideEvent(){ 
 
    var slider = document.querySelector('.img-slider'); 
 
    var img = document.querySelectorAll('.img-slider > img'); 
 
    var left = document.querySelector('.left-btn'); 
 
    var right = document.querySelector('.right-btn'); 
 
    left.addEventListener('click',function(){ 
 
     let first = document.querySelector('.img-slider > img'); 
 
     slider.appendChild(first); 
 
     
 
    }); 
 
    right.addEventListener('click',function(){ 
 
     var last = document.querySelector('.img-slider > img:last-child'); 
 
     slider.insertBefore(last,document.querySelector('.img-slider > img')); 
 

 
    }); 
 
}

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: none; 
 
    border:none; 
 
    background-color: transparent; 
 
} 
 
body{ 
 
    max-width: 100vw; 
 
    min-height: 300vh; 
 
} 
 

 
header{ 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
section{ 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.dir-col{ 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
.left-btn, .right-btn{ 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 80px; 
 
    background-color: rgba(0,0,0,0.4); 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    cursor: pointer; 
 
} 
 
.left-btn{ 
 
    left: -70px; 
 
} 
 
.left-btn > span, .right-btn > span{ 
 
    display: inline-block; 
 
    position: absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 2px solid white; 
 
    border-left: 2px solid white; 
 
} 
 
.left-btn > span{ 
 
    transform:rotate(-45deg) translate(3px, 3px); 
 
} 
 
.right-btn > span{ 
 
    transform:rotate(135deg) translate(3px, 3px); 
 
} 
 
.right-btn{ 
 
    right: -70px; 
 
} 
 
.img-slider{ 
 
    width: 1044px; 
 
    font-size: 0; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 

 
} 
 
.img-slider > img{ 
 
    margin: 0 10px; 
 
    transition: all 1s; 
 
    animation: create 1s; 
 
} 
 

 
@keyframes create{ 
 
    0%{ 
 
     opacity: 0; 
 
     transform: translateX(50px); 
 
    } 
 
    100%{ 
 
     opacity: 1; 
 
     transform: translateX(0px); 
 
    } 
 
}

<section class="dir-col" style="padding-bottom: 150px;padding-top: 100px;"> 
 
    <section style="position: relative;"> 
 
    <button class="left-btn"><span></span></button> 
 
    <div class="img-slider"> 
 
     <img src="https://i.imgur.com/QLlXuyU.jpg" /> 
 
     <img src="https://i.imgur.com/Ugq9d3S.jpg" /> 
 
     <img src="https://i.imgur.com/deqBfhh.jpg" /> 
 
     <img src="https://i.imgur.com/deqBfhh.jpg" /> 
 
    </div> 
 
    <button class="right-btn"><span></span></button> 
 
    </section> 
 
</section>

私は、コードについては上記を参照、バニラJSでImage Sliderを作りました。

ただし、問題があります。

ボタンをクリックすると、すべての画像がアニメーションとともに移動する必要があります。

しかし、意図したとおりに動作していません。単一の要素（新しい要素）だけが動作していますが、アニメーション化されているものはありません。

すべての要素がアニメーション化されていることを確認するにはどうすればよいですか？

Answer 1

あなたのコードに間違っている箇所がたくさんあります：現在の行動の

• 理由だけで1枚の画像が実際に変更される（その位置を移動させる）ようなアニメーションがオンに再適用されているという事実でありますそれ以外の画像は影響を受けないので、静止しています
• 一度にすべての画像を移動できるようにするには、何らかの種類のコンテナが必要です。そうしないと、何らかの形でアニメーションを再タッチする必要があります
• 左/右に切り替えたようです

すべての不足している機能を追加し、上記の問題を解決するためにコードを更新しました。

function imgSlideEvent() { 
 
    var slider = document.querySelector('.img-slider'); 
 
    var container = document.querySelector('.slider-images'); 
 
    var left = document.querySelector('.left-btn'); 
 
    var right = document.querySelector('.right-btn'); 
 

 
    left.addEventListener('click', function() { 
 
     var oldImg = container.querySelector('img:last-child'); 
 
     var newImg = oldImg.cloneNode(); 
 
     container.insertBefore(newImg, container.childNodes.item(0)); 
 
     slider.classList.add('move-right'); 
 
     oldImg.classList.add('disappear'); 
 
     newImg.classList.add('appear'); 
 
     setTimeout(function() { 
 
      container.removeChild(oldImg); 
 
      slider.classList.remove('move-right'); 
 
      newImg.classList.remove('appear'); 
 
     }, 1000); 
 
    }); 
 

 
    right.addEventListener('click', function() { 
 
     var oldImg = container.querySelector('img:first-child'); 
 
     var newImg = oldImg.cloneNode(); 
 
     container.appendChild(newImg); 
 
     slider.classList.add('move-left'); 
 
     oldImg.classList.add('disappear'); 
 
     newImg.classList.add('appear'); 
 
     setTimeout(function() { 
 
      container.removeChild(oldImg); 
 
      slider.classList.remove('move-left'); 
 
      newImg.classList.remove('appear'); 
 
     }, 1000); 
 
    }); 
 

 
    // Let appearance animation to be played just once 
 
    setTimeout(function() { 
 
     slider.classList.remove('new'); 
 
    }, 1000); 
 
} 
 

 
imgSlideEvent();

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: none; 
 
    border: none; 
 
    background-color: transparent; 
 
} 
 

 
body { 
 
    max-width: 100vw; 
 
    min-height: 300vh; 
 
} 
 

 
header { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
section { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.dir-col { 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.left-btn, .right-btn { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 80px; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    cursor: pointer; 
 
} 
 

 
.left-btn { 
 
    left: -70px; 
 
} 
 

 
.left-btn > span, .right-btn > span { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 2px solid white; 
 
    border-left: 2px solid white; 
 
} 
 

 
.left-btn > span { 
 
    transform: rotate(-45deg) translate(3px, 3px); 
 
} 
 

 
.right-btn > span { 
 
    transform: rotate(135deg) translate(3px, 3px); 
 
} 
 

 
.right-btn { 
 
    right: -70px; 
 
} 
 

 
.img-slider { 
 
    width: 1044px; 
 
    font-size: 0; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.img-slider img { 
 
    margin: 0 10px; 
 
} 
 

 
/* Initial animation */ 
 
.img-slider.new .slider-images { 
 
    animation: create 1s; 
 
} 
 

 
@keyframes create { 
 
    0% { 
 
     opacity: 0; 
 
     transform: translateX(50px); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     transform: translateX(0px); 
 
    } 
 
} 
 

 
/* Movement animations */ 
 
.img-slider.move-left .slider-images { 
 
    animation: move-left 1s; 
 
} 
 

 
.img-slider.move-right .slider-images { 
 
    animation: move-right 1s; 
 
} 
 

 
/* 261px in animation is 241px of your images + 2 * 10px margin between them */ 
 
@keyframes move-left { 
 
    0% { 
 
     transform: translateX(0); 
 
    } 
 
    100% { 
 
     transform: translateX(-261px); 
 
    } 
 
} 
 

 
@keyframes move-right { 
 
    0% { 
 
     transform: translateX(-261px); 
 
    } 
 
    100% { 
 
     transform: translateX(0); 
 
    } 
 
} 
 

 
/* Animations for appear/disappear of the images, optional */ 
 
.img-slider img.appear { 
 
    animation: appear 1s; 
 
} 
 

 
.img-slider img.disappear { 
 
    animation: disappear 1s; 
 
} 
 

 
@keyframes appear { 
 
    0% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
} 
 

 
@keyframes disappear { 
 
    0% { 
 
     opacity: 1; 
 
    } 
 
    100% { 
 
     opacity: 0; 
 
    } 
 
}

<section class="dir-col" style="padding-bottom: 150px;padding-top: 100px;"> 
 
    <section style="position: relative;"> 
 
     <button class="left-btn"><span></span></button> 
 
     <div class="img-slider new"> 
 
      <div class="slider-images"> 
 
       <img src="https://i.imgur.com/QLlXuyU.jpg"/> 
 
       <img src="https://i.imgur.com/Ugq9d3S.jpg"/> 
 
       <img src="https://i.imgur.com/deqBfhh.jpg"/> 
 
       <img src="https://i.imgur.com/deqBfhh.jpg"/> 
 
      </div> 
 
     </div> 
 
     <button class="right-btn"><span></span></button> 
 
    </section> 
 
</section>