Infinite horizontal slider showing more than one slide with pause animation on hover

Question

I am trying to make an infinite slider that slides from right to left and shows 4 slides at a time. I mean infinite something like when the slide 1 is hidden it then moves to the end next to the last slide.

this is my html:

<div id="slider">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    ... up to slide 6
</div>

I am new to jquery so I don't have a solid idea how to get this done.

• I think sliding should be inside a setInterval().
• use animate() for the animation of margin-left. set a negative value for the margin-left to slide it to the left and hide.
• get the hidden slide and move it to the last

jquery:

var currentSlide = 0;
setInterval(function(){
    $('.slide').animate({marginLeft:-$('.slide').width()});     
    $('.slide').eq(currentSlide++).insertAfter($('.slide').last())
}, 2000);

Each slide contains text with a background-image. That is all I have now, the sliding is ugly. I want to also set how many I want to show with jquery so I dont have to edit my css, I also would like to integrate something like a pause when you hover on the slider. Please help, thank you.

Answer 1

I think you have a good idea on how to get this done. But your code needs correcting.

You are animating all the '.slide' , Since they are all inline you only need to animate the first slide and everything after will just follow:

$('.slide').first().animate({marginLeft:-$('.slide').width()});

And you are also animating and moving it at the same time. You need to only move it once the animate has completed.

$('.slide').first().animate({
    marginLeft:-$('.slide').width()
}, 'slow', function(){
    //once completely hidden, move this slide next to the last slide
    //and reset the margin-left to 0
    $(this).appendTo($(this).parent()).css({marginLeft: 0});       
});

Here is the jsfiddle .

---

To fix the sliding issue we need to add a wrapper for the slides and set its width base on the total width of all the slides.

new markup:

<div id="slider">
    <div id="slide-container">
        <div class="slide">slide 1</div>
        <div class="slide">slide 2</div>
    </div>
</div>

jQuery:

var w = $('#slider').width() / 4;
var l = $('.slide').length;
//set each slide width
$('.slide').width(w);  
//set the container width to fix the animation sliding issue
$('#slide-container').width(w * l)

To add a pause when hovering on the slider you just need to clearInterval and reset it to continue:

function slider(){
    $('.slide').first().animate({
        marginLeft: -w 
    }, 'slow', function () {
        $(this).appendTo($(this).parent()).css({marginLeft: 0});
    });
}

//setInterval on DOM ready
var timer = setInterval(slider, 2000);

$('#slider').hover(function(){
    //mouse in, clearinterval to pause
    clearInterval(timer);
},function(){
    //mouse out, setinterval to continue
    timer = setInterval(slider, 2000);
});

See this updated jsfiddle .