nir9 / itemslide

JavaScript Touch Carousel Library with Zero Dependencies
https://itemslide.org
MIT License
647 stars 85 forks source link

Loop Slides #41

Open ghost opened 8 years ago

ghost commented 8 years ago

Would it be possible to loop slides as a continuous carousel?

nir9 commented 8 years ago

Yes i'll add this feature next release.

adrienlamotte commented 8 years ago

+1 I'd love that option too :)

Artexoid commented 8 years ago

+1 Oh OH!!! Yes yes!! Excellent script, thank you but i want a loop mode too!! :-)

trawen commented 8 years ago

Need loop! ))

faliqaiman commented 7 years ago

Loop needed! And how to make it start on center?

nir9 commented 7 years ago

@faliqaiman On the website it starts on center so you can just use the code from the website...

evalibantova commented 7 years ago

It's been more than a year. Is the looping feature ever coming?

PurHur commented 7 years ago

Github is not a user whishlist. Please clone the repo, make the changes and then make a merge request. Thanks

evalibantova commented 7 years ago

Really? I wasn't aware of that... -_- I asked because it was said that the feature would be included in the next release. Thank you for your suggestion.

forrestbaer commented 7 years ago

I would be happy to work on this, but honestly I'm a bit daunted, could the developer possibly provide some insight on where or what might need to be modified, even at a very high level, in order to make this happen?

nir9 commented 7 years ago

The idea is to enable the carousel to be looped once you reach the end of it, a way to implement this is to move the objects from the beginning of the carousel to the end when approaching the last slide. Just to be clear this option will only work when the option "one_item" is enabled (unless you find a way to do all the above in real time but less critical i think)

Anyway that's the idea in high level, of course welcome to check the contribution readme for more info on getting the development environment setup.

PurHur commented 7 years ago

I implemented this on huge sliders with 100+ items. If you have a invisible area this works relay well but i think its not a feature for the library itself. It depends huge on the design around the slider.

studiolxv commented 5 years ago

I created a version that will slide back to the first slide, and automatically go to the next slide every 4 seconds, hope this helps someone. This "sliding backwards through all slides" isn't so bad with less than 10 slides. But if you have more than 10 It would look pretty weird.

`var carousel;

$(document).ready(function() {

carousel = $("#itemslide ul");

carousel.itemslide({
    one_item: true, //Set this for proper full screen navigation
    disable_scroll: true,
    parent_width: true,
    duration: 1500
}); //initialize itemslide

$(window).resize(function() {
    carousel.reload();

}); //Recalculate width and center positions and sizes when window is resized

var delayTime = 4000;

var SetTimer = setInterval(function() {
    carousel.next();
}, delayTime);

function resetTimer() {
    clearInterval(SetTimer);
    SetTimer = setInterval(function() {
        carousel.next();
    }, delayTime);
}

// Buttons
// 
$("#next").click(function() {
    carousel.next();
    resetTimer();
});

$("#previous").click(function() {
    carousel.previous();
    resetTimer();
});

carousel.on('pan', function(event) {
    resetTimer();
});

function addClass() {
    i = 1;
    $('#itemslide ul li').each(function(i) {
        $(this).addClass('slide-' + i);
    });
}
addClass();

carousel.on('changeActiveIndex', function(e) {
    var slideCount = $('#itemslide ul li').length;
    var currentSlide = carousel.getActiveIndex();
    var lastSlide = slideCount - 1;

    if (currentSlide == lastSlide) {
        setTimeout(function() {
            carousel.gotoSlide(0);
        }, delayTime);

    }

});

}); `