가 어떻게 내 슬라이더 루프가 계속

Question

내 평가 섹션 작업하려면이 jQuery 코드를 사용 할 수 있습니다 : 나는 깨달았다 내 pen을 통해 보는

$(document).ready(function() { 
    var testimonialItem = $(".testimonial-wrapper .testimonial-item"); 
    var lengthOfItem = testimonialItem.length; 
    var counter = 0; 
    testimonialItem.hide(); 
    setTimeout(function(){ 
    startIteration(counter); 
    }, 1000); 
    function startIteration(counter) { 
    testimonialItem.eq(counter).fadeIn('slow', function() { 
     if(counter<=lengthOfItem){ 
     setTimeout(function(){ 
     testimonialItem.fadeOut('slow',function(){ 
     if (counter == lengthOfItem) { 
      counter = 0; 
     } 
     else{ 
      counter++; 
     } 
     setTimeout(function(){ 
      startIteration(counter); 
     }, 500);  
     }); 
     }, 2000); 
     } 
    }); 
    } 
}); 

을 그 분 후에 링크를 떠난 후, 내가 돌아 갈 때, 슬라이더가 사라집니다. 슬라이더가 항상 반복되도록 수정할 수있는 방법이 있습니까? 당신이 예제 이미지에 고급

에서

감사를 볼 수 있습니다마다이 평가 변경, 총알도 색상을 변경하도록 naigation 글 머리 기호를 추가 도울 수 있다면

도 감사겠습니까

Here my codepen

Answer 1

솔직히 말하면 나는 어떤 것을 해결했다고 말할 수 없습니다. 오랫동안 머물러있는 타이머에 대해 다른 문제가있을 수도 있지만 내 인터넷 검색은 아무 것도 나오지 않습니다.

$(document).ready(function() { 
    var testimonialItem = $(".testimonial-wrapper .testimonial-item"); 
    var lengthOfItem = testimonialItem.length; 
    testimonialItem.hide(); 

    setTimeout(startIteration.bind(0), 1000); 

    function startIteration(counter) { 
    var item = testimonialItem.eq(counter) 
    item.fadeIn('slow', function() { 
     setTimeout(function() { 
     item.fadeOut('slow', function() { 
      startIteration((counter + 1) % lengthOfItem); 
     }); 
     }, 2000); 
    }); 
    } 
}); 

Answer 2

귀하는 대체 할 .queue()가 .delay(), .promise() 큐 어레이 추가적인 기능을 포함하지 않는 경우와 동일한 기능을 호출 .then() 반복 스케줄링

var items = $(".testimonial-item").hide(); 
 

 
function testimonials() { 
 
    return $({}).queue("testimonials", $.map(items, function(el) { 
 
     return function(next) { 
 
     $(el).fadeIn("slow", function() { 
 
      $(this).delay(2000).fadeOut("slow", next) 
 
     }) 
 
     } 
 
    })).dequeue("testimonials").promise("testimonials") 
 
    .then(testimonials) 
 
} 
 

 
testimonials()

hr { 
 
    height: 4px; 
 
    border: none; 
 
    color: #333; 
 
    background-color: #7BC83A; 
 
    width: 70px; 
 
    margin-left: 0; 
 
} 
 

 
.testimonial-item { 
 
    display: block; 
 
    opacity: 0.872447; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-6 testimonial-wrapper"> 
 
    <div class="testimonial-item"> 
 
    <h3>Testimonials</h3> 
 
    <hr> 
 
    <h4>Shaf/ Seo</h4> 
 
    <blockquote> 
 
     <p>Hi</p> 
 
    </blockquote> 
 
    </div> 
 
    <div class="testimonial-item" style="opacity: 1;"> 
 
    <h3>Testimonials</h3> 
 
    <hr> 
 
    <h4>Shaje/ As</h4> 
 
    <blockquote> 
 
     <p>Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text Lorem Ipsum Simply Dummy text</p> 
 
    </blockquote> 
 
    </div> 
 
</div>