Сделайте повтор карусели JS

Question

Я использую следующий код для простой карусели. Я хотел бы повторить его после того, как вы перейдете к третьему элементу цитаты.

Может ли кто-нибудь помочь? Спасибо.

Вот JS:

<script> 
show() 
    $(function() { 
    var currentCarousel = 0; 
    function changeCarousel() { 
     $('.quote-item').hide(); 
     $('.quote-item:eq('+ currentCarousel +')').show(); 
     currentCarousel = currentCarousel + 1; 
     setTimeout(function(){ changeCarousel(); }, 8000); 
    } 
    changeCarousel(); 
    $('.quote-change').click(function(e) { 
    e.preventDefault(); 
     changeCarousel(); 
    }); 
     }); 
    </script> 

И это HTML:

<div class="quote" > 
    <div class="quote-item"> 
    <div class="quote-image"> 
     <img src="" alt="quote 1"> 
    </div>          
    <div class="quote-text"> 
     quote text one 
    </div> 
    </div> 
    <div class="quote-item"> 
    <div class="quote-image"> 
     <img src="" alt="quote 1"> 
    </div>          
    <div class="quote-text"> 
     quote text Two... 
    </div>         
    </div> 
    <div class="quote-item"> 
    <div class="quote-image"> 
     <img src="" alt="quote 1"> 
    </div>          
    <div class="quote-text"> 
     quote text THREE... 
    </div>         
    </div> 
<a href="#" class="quote-change">next</a> 
</div> 

Answer 1

Попробуйте это:

$(function() { 
 
    var currentCarousel = 0; 
 
    var timeoutID = null; 
 
    var timeoutDuration = 2000; 
 
    var quoteChange = $('.quote-change'); 
 
    var quoteItems = $('.quote-item'); 
 
    var numQuotes = quoteItems.length; 
 
    
 
    function changeCarousel() { 
 
     quoteItems.hide(); 
 
     quoteItems.eq(currentCarousel).show(); 
 
     currentCarousel += 1; 
 
     if (currentCarousel === numQuotes) { currentCarousel = 0; } 
 
     clearTimeout(timeoutID); 
 
     timeoutID = setTimeout(function() { 
 
      changeCarousel(); 
 
     }, timeoutDuration); 
 
    } 
 
    changeCarousel(); 
 
    quoteChange.click(function (e) { 
 
     e.preventDefault(); 
 
     changeCarousel(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="quote"> 
 
    <div class="quote-item"> 
 
     <div class="quote-image"> 
 
      <img src="" alt="quote 1" /> 
 
     </div> 
 
     <div class="quote-text">quote text one</div> 
 
    </div> 
 
    <div class="quote-item"> 
 
     <div class="quote-image"> 
 
      <img src="" alt="quote 2" /> 
 
     </div> 
 
     <div class="quote-text">quote text Two...</div> 
 
    </div> 
 
    <div class="quote-item"> 
 
     <div class="quote-image"> 
 
      <img src="" alt="quote 3" /> 
 
     </div> 
 
     <div class="quote-text">quote text THREE...</div> 
 
    </div> 
 
<a href="#" class="quote-change">next</a> 
 

 
</div>

Также вы пропускали clearTimeout();, так как у вас есть click обработчик вызывая ту же функцию changeCarousel(), а также. Существует конфликт.

Итак, представьте, что по умолчанию, ваш setTimeout продолжает называть changeCarousel() рекурсивно и предполагая, что он был прав в середине другого цикла (4 секунды), когда вы решили нажать на кнопку next и перейти к следующему пункту карусельного самостоятельно. Из-за этого ваш новый пункт карусели теперь будет оставаться видимым только на оставшиеся 4 секунды, но вместо этого он должен был остаться на 8 секунд. Придать смысла?

Надеюсь, вы найдете это полезным.

Answer 2

Обновите changeCarousel так if currentCarousel >= slides.length он сбрасывается в 0

function changeCarousel() { 
     $('.quote-item').hide(); 
     $('.quote-item:eq('+ currentCarousel +')').show();   
     if(currentCarousel >= slides.length){ 
     currentCarousel = 0; 
     } else{ 
     currentCarousel++; 
     } 
     setTimeout(function(){ changeCarousel(); }, 8000); 
    }