jQuery-Schieberegler bei Klick

Question

Ich möchte diesen Schieberegler arbeiten lassen, wenn Sie auf den Schieberegler klicken. Wie kann ich das machen? Dies ist der Code: 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

Bewegen Sie den Code, der das Gleiten auf seine eigene Funktion hat, und rufen Sie das aus der setInterval und auf einen Klick:

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/