버튼을 클릭 할 때 재생 페이드 인/페이드 아웃 슬라이더

Question

나는 페이드 인/페이드 아웃 슬라이더를 만들었습니다. 자동차에서 작동하고 있습니다. 다음/이전 버튼을 클릭하여 슬라이더를 재생하고 싶습니다.

HTML

<section class="wrapper"> 
<ul class="slider"> 
    <li><img src="http://www.tylershields.com/images/gallery/art_gallery.jpg" alt="" /></li> 
    <li><img src="http://www.goa-tourism.com/images/photogallery/1287634889_pid_kala%20academy%20art%20gallery.jpg" alt="" /></li> 
    <li><img src="http://www.magnoliabakery.com/uploads/GalleryImageModel/105/filemask/mag1003_magnolia_fall_14original.gallery.jpg" alt="" /></li> 
    <li><img src="http://www.lancasterconventioncenter.com/_images/_gallery/gallery15.jpg" alt="" /></li> 
</ul> 
<button data-dir="prev">Prev</button> 
<button data-dir="next">Next</button> 
</section> 

CSS

*    {margin:0; padding:0;} 
.wrapper  {width:800px; margin:0 auto; max-width:100%;} 
.slider   {position:relative;} 
.slider li  {position:absolute; top:0; left:0; list-style:none; width:100%; opacity:0;} 
.slider li img    {width:100%;} 
.slider li:first-child  {position:relative; display:block; opacity:1;} 

스크립트

var current = 0, 
    elem = $('.slider li'), 
    slides = $('.slider li').length, 
    speed = 3000, 
    transSpeed = 1000; 

function autoSlide(){ 

    current = (current == (slides-1)) ? 0 : +1; 

    $('.slider').find('li') 
     .filter(':eq('+ current +')').addClass('current').animate({'opacity':1}, transSpeed) 
     .siblings('li').removeClass('current').animate({'opacity':0}, transSpeed); 
    }; 

var timer = setInterval(autoSlide, speed); 

$('button').on('click', function(){ 
    clearInterval(timer); 
    autoSlide(); 
    timer =setInterval(autoSlide, speed); 
}); 

Fiddle Demo

Answer 1

귀하의 문제는이 라인에 있습니다

current = (current == (slides-1)) ? 0 : current + 1 // you were doing +1 which will always return 1 

귀하의 current 변수가 항상 1

이 도움이 될 것입니다 희망로 설정!

Fiddle Demo

---

당신이 모두 하나의 핸들러를 사용하고, 당신이 클릭되는 버튼을 점검 할 필요가 이전 및 다음 이동 코드를 아래 참조하려면 업데이트 :

클릭 한 요소는 autoSlidefunction(element)

전체 코드

function autoSlide(element) { 
    var clicked = $(element).text().toLowerCase().trim(); // Get next or prev 
    if (clicked == "next") 
     current = (current == (slides - 1)) ? 0 : current + 1; // Current will be incremented 
    else 
     current = (current == 0) ? 0 : current - 1; // decrease in current 
    $('.slider').find('li') 
     .filter(':eq(' + current + ')').addClass('current').animate({ 
      'opacity': 1 
     }, transSpeed) 
     .siblings('li').removeClass('current').animate({ 
      'opacity': 0 
     }, transSpeed); 
}; 

var timer = setInterval(autoSlide, speed); 

$('button').on('click', function() { 
    clearInterval(timer); 
    autoSlide($(this)); // to get clicked element to autoSlide() 
    timer = setInterval(autoSlide, speed); 
}); 

Updated Fiddle