jQuery 슬라이더를 클릭하십시오.

Question

슬라이더를 클릭하면이 슬라이더를 작동 시키려고합니다. 어떻게해야합니까? 이 코드입니다 : http://jsfiddle.net/EjZzs/15/

$(function() { 

//settings for slider 
var width = 720; 
var animationSpeed = 1000; 
var pause = 3000; 
var currentSlide = 1; 

//cache DOM elements 
var $slider = $('#slider'); 
var $slideContainer = $('.slides', $slider); 
var $slides = $('.slide', $slider); 

var interval; 

function startSlider() { 
    interval = setInterval(function() { 
     $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { 
      if (++currentSlide === $slides.length) { 
       currentSlide = 1; 
       $slideContainer.css('margin-left', 0); 
      } 
     }); 
    }, pause); 
} 
function pauseSlider() { 
    clearInterval(interval); 
} 

$slideContainer 
    .on('mouseenter', pauseSlider) 
    .on('mouseleave', startSlider); 

startSlider(); 

}); 

Answer 1

이동합니다 고유의 기능에 슬라이딩 수행하는 코드 및 통화 그하여 setInterval에서 및 클릭에 :

function startSlider() { 
    interval = setInterval(slide, pause); 
    } 

    function slide() { 
    $slideContainer.animate({ 
     'margin-left': '-=' + width 
    }, animationSpeed, function() { 
     if (++currentSlide === $slides.length) { 
     currentSlide = 1; 
     $slideContainer.css('margin-left', 0); 
     } 
    }); 
    } 

    $slideContainer 
    .on('mouseenter', pauseSlider) 
    .on('mouseleave', startSlider) 
    .on('click', slide); 

http://jsfiddle.net/uctr94ve/