自動的にスライドするカルセルを設定する

Question

私は簡単なカルーセルを持っています。

矢印をクリックする代わりに、自動的にスライドしたいと思っています。

デモ：https://jsfiddle.net/vbcL9npo/

carousel = (function(){ 
 

 
    // Read necessary elements from the DOM once 
 
    var box = document.querySelector('.carouselbox'); 
 
    var next = box.querySelector('.next'); 
 
    var prev = box.querySelector('.prev'); 
 

 
    // Define the global counter, the items and the 
 
    // current item 
 
    var counter = 0; 
 
    var items = box.querySelectorAll('.content li'); 
 
    var amount = items.length; 
 
    var current = items[0]; 
 

 
    box.classList.add('active'); 
 

 
    // navigate through the carousel 
 

 
    function navigate(direction) { 
 

 
    // hide the old current list item 
 
    current.classList.remove('current'); 
 
    
 
    // calculate th new position 
 
    counter = counter + direction; 
 

 
    // if the previous one was chosen 
 
    // and the counter is less than 0 
 
    // make the counter the last element, 
 
    // thus looping the carousel 
 
    if (direction === -1 && 
 
     counter < 0) { 
 
     counter = amount - 1; 
 
    } 
 

 
    // if the next button was clicked and there 
 
    // is no items element, set the counter 
 
    // to 0 
 
    if (direction === 1 && 
 
     !items[counter]) { 
 
     counter = 0; 
 
    } 
 

 
    // set new current element 
 
    // and add CSS class 
 
    current = items[counter]; 
 
    current.classList.add('current'); 
 
    } 
 

 
    // add event handlers to buttons 
 
    next.addEventListener('click', function(ev) { 
 
    navigate(1); 
 
    }); 
 
    prev.addEventListener('click', function(ev) { 
 
    navigate(-1); 
 
    }); 
 

 
    // show the first element 
 
    // (when direction is 0 counter doesn't change) 
 
    navigate(0); 
 

 
})();

.carouselbox { 
 
     font-family: helvetica,sans-serif; 
 
     font-size: 14px; 
 
     width: 100px; 
 
     position: relative; 
 
     margin: 1em; 
 
     border: 1px solid #ccc; 
 
     box-shadow: 2px 2px 10px #ccc; 
 
     overflow: hidden; 
 
    } 
 
    .content { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .content li { 
 
     font-size: 100px; 
 
     margin: 0; 
 
     padding: 0; 
 
     width: 100%; 
 
     list-style: none; 
 
     text-align: center; 
 
     z-index: 2; 
 
    } 
 

 

 
    .active { 
 
     height: 130px; 
 
    } 
 
    .carouselbox button { 
 
     border: none; 
 
     visibility: hidden; 
 
    } 
 
    .active button { 
 
     visibility: visible; 
 
    } 
 
    .offscreen { 
 
     position: absolute; 
 
     left: -2000px; 
 
    } 
 

 
    .active .buttons { 
 
     padding: 5px 0; 
 
     background: #eee; 
 
     text-align: center; 
 
     z-index: 10; 
 
     position: relative; 
 
    } 
 
    .active li { 
 
     position: absolute; 
 
     top: 130px; 
 

 
     opacity: 0; 
 
     transform: scale(0); 
 
     transition: 1s; 
 
    } 
 
    .active li.current { 
 
     top: 30px; 
 

 
     opacity: 1; 
 
     transform: scale(1); 
 
     transition: 1s; 
 
    }

<div class="carouselbox"> 
 
    <div class="buttons"> 
 
    <button class="prev"> 
 
     ◀ <span class="offscreen">Previous</span> 
 
    </button> 
 
    <button class="next"> 
 
     <span class="offscreen">Next</span> ▶ 
 
    </button> 
 
    </div> 
 
    <ol class="content"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ol> 
 
</div>

Answer 1

あなたはsetIntervalを使用する必要があります。それを変数として保存し、自動終了させる場合は後でクリアすることができます。

例：https://jsfiddle.net/vbcL9npo/1/

var carousel = (function(){ 

    // Read necessary elements from the DOM once 
    var box = document.querySelector('.carouselbox'); 
    var next = box.querySelector('.next'); 
    var prev = box.querySelector('.prev'); 

    // Define the global counter, the items and the 
    // current item 
    var counter = 0; 
    var items = box.querySelectorAll('.content li'); 
    var amount = items.length; 
    var current = items[0]; 

    box.classList.add('active'); 

    // navigate through the carousel 

    function navigate(direction) { 

    // hide the old current list item 
    current.classList.remove('current'); 

    // calculate th new position 
    counter = counter + direction; 

    // if the previous one was chosen 
    // and the counter is less than 0 
    // make the counter the last element, 
    // thus looping the carousel 
    if (direction === -1 && 
     counter < 0) { 
     counter = amount - 1; 
    } 

    // if the next button was clicked and there 
    // is no items element, set the counter 
    // to 0 
    if (direction === 1 && 
     !items[counter]) { 
     counter = 0; 
    } 

    // set new current element 
    // and add CSS class 
    current = items[counter]; 
    current.classList.add('current'); 
    } 

    // add event handlers to buttons 
    next.addEventListener('click', function(ev) { 
    navigate(1); 
    }); 
    prev.addEventListener('click', function(ev) { 
    navigate(-1); 
    }); 

    // show the first element 
    // (when direction is 0 counter doesn't change) 
    navigate(0); 

    var interval = setInterval(function() { navigate(1) }, 1000); 
})();