Jquery - Configure auto slide

Question

Hey there i got this jquery slider:

i added some options (mouseover and mouseout), but i dont know what to put there..

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  2000);

$('#stopSlider').mouseover({
    // stop slider
})
$('#stopSlider').mouseout({
    // start slider again
})

Could you take a look? :)

Greetings!!

score 0 · Answer 1 · answered Mar 09 '14 at 23:10

Hope this helps: http://jsfiddle.net/Jtec5/378/

$("#slideshow > div:gt(0)").hide();

var startSlideShow = function() { 
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },
    interval = setInterval(startSlideShow,  2000);

$('#stopSlide').mouseover(function() {
    clearInterval(interval);
});

$('#stopSlide').mouseout(function() {
    interval = setInterval(startSlideShow, 2000);
});

This is a far cry from an elegant solution, but I hope it gives you a better picture of how event handlers and setInterval work.

score 0 · Answer 2 · answered Mar 09 '14 at 23:13

Simply declare a variable stopped and set it to true when the mouse hovers the stopSlider-element and false when it leaves it. In the setInterval-function, wrap everything in an if-statement which checks if stopped is true or not.

var stopped=false;
$("#slideshow > div:gt(0)").hide();      
setInterval(function() { 
  if(!stopped){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
  }
},  2000);

$('#stopSlide').mouseover(function(){
  stopped=true;
})
$('#stopSlide').mouseout(function(){
  stopped=false;
})

score 0 · Answer 3 · answered Mar 09 '14 at 23:33

The way to synchronize animations in jQuery is by use of the step option. See jQuery Animate Documentation and look under options. You can have a callback method that changes the x position of the other 2 slides synchronously.

The even better way to do animations like this is with CSS3, which if your clients don't support, you can gracefully fall-back to jQuery. I suggest using jQuery Transit. This will handle the fallback for you and keep your code clean.

Jquery - Configure auto slide

3 Answers3