nir9 / itemslide

JavaScript Touch Carousel Library with Zero Dependencies

Home Page:https://itemslide.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Auto Sliding

chinkan opened this issue · comments

Would it be possible to auto sliding by a interval?

i guess i can add that.
you can implement it yourself quite easily with setInterval,

This will advance every 4 seconds and return to the first slide after the last slide has been displayed for the delayTime amount. Hope it helps someone.

`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);

    }

});

});`

Due to the fact this feature can be implemented easily without support from the lib, I am closing this issue