CODEWITHSUNDEEP
jquerybuttonslider
kuba0506
kuba0506

Reputation: 475

jquery Stop/Start slider button

I'm looking solution for a simple task. How to programm button to stop/start a slideshow. I made startSlider, stopSlider functions and when I save chnges, button disappear.

    $('#stopStartBtn').toggle(
        function(e){ e.preventDefault();
            stopSlider()}, 
        function(e){ e.preventDefault();
            startSlider();}
        );

Apart form that, slider reacts (stop/start) on hover and starts on document ready.

HTML:

<div id="slider">
    <ul class="slides">
        <li class="image" rel="Image 01"><img src="http://dummyimage.com/720x400/000/fff.png" alt="#"></li>
        <li class="image" rel="Image 02"><img src="http://dummyimage.com/720x400/000766/0011ff.png" alt="#"></li>
        <li class="image" rel="Image 03"><img src="http://dummyimage.com/720x400/c9c9c9/0011ff.png" alt="#"></li>
        <li class="image" rel="Image 04"><img src="http://dummyimage.com/720x400/000/fff.png" alt="#"></li>
        <li class="image" rel="Image 05"><img src="http://dummyimage.com/720x400/c9c9c9/0011ff.png" alt="#"></li>
        <li class="image" rel="Image 06"><img src="http://dummyimage.com/720x400/000766/0011ff.png" alt="#"></li>
    </ul><!--./slides-->
</div><!--./slider-->
<button id="stopStartBtn">Stop/Start</button>

JS:

$(function(){
    //configuration
    var width = 720,
        animationSpeed = 1000,
        pause = 500,
        currentImage = 1,
        interval;

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

    //setInterval
    function startSlider() {
        interval = setInterval(function(){
            $slideContainer.animate({'margin-left': '-='+width},animationSpeed, function(){
                currentImage++;
                //if it's last slide go to position 1 (0px)
                if(currentImage === $image.length) {
                    currentImage = 1;
                    $slideContainer.css('margin-left',0);
                }
            });
        },pause);//setInterval
    }//startSlider

    function stopSlider() {
        clearInterval(interval);
    }//stopSlider

    //hover stop/start
    $slider.on('mouseenter',stopSlider).on('mouseleave',startSlider);

    $('#stopStartBtn').toggle(
        function(e){ e.preventDefault();
            stopSlider();}, 
        function(e){ e.preventDefault();
            startSlider();}
        );

    startSlider();
});//ready

Upvotes: 0

Views: 2698

Answers (1)

Amin Jafari
Amin Jafari

Reputation: 7207

here you go: DEMO

var started=true;
$('#stopStartBtn').click(function(){
    if(started){
        stopSlider();
        started=false;
    }
    else{
        startSlider();
        started=true;
    }
});

Explanation:

toggle() function is to hide or show an element, you can not use it to create a toggle button, what you can do is to simulate the toggle action using a variable as mentioned in the answer code.

Also the pause variable must be equal to animationSpeed variable.

Upvotes: 1

Related Questions