jquery infinite slider images

Question

I\'m trying to create an infinite slider using jquery. My page has some tags, with the width equal to the window width.

I want to slide every image after 10 seconds

Answer 1

Here is a FIDDLE that will get you started.

1. Put all your images in a hidden div

2. Clone them and put them in the visible div

3. Animate the image by changing the left margin

4. You can adjust the time between images by the set interval function

5. You can adjust the slidein time by the animate time.

6. Because it's an infinite loop, I put the button in to stop the animation any time you want.

JS

var pictxtnumber = 1;
loadpictxt(pictxtnumber);

var fadeintime = 500;
animatediv();

function animatediv()
{
    var number = 0;
    var interval = setInterval(function() { 
                                           pictxtnumber = pictxtnumber + 1;
                                           if(pictxtnumber > 6)
                                             {
                                              pictxtnumber = 1;
                                              }
                                           loadpictxt(pictxtnumber);
                                           $('#stopanim').on('click', function(){
                                                                                 clearInterval(interval);
                                                                                 });
                                           }, 1000);
}

function loadpictxt(num)
{
  $('.picturediv').html('');
  $(".hiddenimage img:nth-child(" + num + ") ").clone().appendTo('.picturediv');
  $('.picturediv img').css('margin-left', '100px');
  $('.picturediv img').animate({marginLeft: "0"}, 100);    
}

Answer 2

I've made two simple jquery plugins for that:

• https://github.com/lingtalfi/jItemSlider
• https://github.com/lingtalfi/jInfiniteSlider

I recommend the item slider because the items are forced to be aligned, and it's simpler in the end.

Now to answer your question: How do I append the first item after the last item and so on so it can be infinite?

You could just display your slider items two times (or more) in a row. Given your html code:

var jSliderList = $(".slider-list");
var jSliderOriginalItems = $("li", jSliderList); // keep track of this one

function init(){
    jSliderList.append(jSliderOriginalItems.clone()); // should work, not tested
}

Then with css, you would narrow the slider to the width of your choice.

Suggestions:

I would suggest that you append a page rather than just one item.

A basic approach would be to encapsulate things into functions, like this:

slideToRight()
    appendItemsToTheRight()
    removeUnecessaryItemsToTheLeft()
    slide()

To perform the slide, you could use css transitions. In your css, put something like this:

.sliderContainer {   
    transition: transform 2s ease;
}

And then in your js code, to slide, just use a function such as:

function moveSlider(the_offset) {
    jSliderContent.css({
        transform: "translate3d(" + the_offset + "px, 0px, 0px)"
    });
}

Now to actually append an item, you could use a renderItem function to generate them, instead of cloning things.

Answer 3

If you are targeting modern browsers that support transitions and transforms i would do it that way..

Demo at http://jsfiddle.net/gaby/dbLu5/

jQuery

var slides = $('.slider-list li'); // cache a reference to the slides

setInterval(function(){
    var current = slides.filter('.current'), // find slide in view
        next = current.next(); // find next slide

    if (!next.length){next = slides.first();} // loop if at last slide

    slides.removeClass('off'); // reposition already viewed slides to the right
    current.removeClass('current').addClass('off'); // set current slide to animate left
    next.removeClass('off').addClass('current'); // set next slide to slide in view
}, 10000); // set the interval

CSS (you need to add vendor prefixes for the transform and transition properties)

.slider-list {
    position:relative;
    padding: 0;
    margin: 0;
    overflow:hidden;
    height: 496px;
}
.slider-list li {
    width:100%;
    height: 100%;
    display: block;
    z-index: 1;
    transition:transform 1s;
    transform:translateX(100%);
    left:0; top:0;
    position:absolute;
    overflow:hidden;
}
.slider-list li.current{
    transform:translateX(0%);
    z-index:100;
}
.slider-list li.off{
    transform:translateX(-100%);
    z-index:100;
}