itemslide icon indicating copy to clipboard operation
itemslide copied to clipboard

Loop Slides

Open ghost opened this issue 9 years ago • 13 comments

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

ghost avatar Dec 03 '15 17:12 ghost

Yes i'll add this feature next release.

nir9 avatar Dec 03 '15 18:12 nir9

+1 I'd love that option too :)

adrienlamotte avatar Mar 07 '16 12:03 adrienlamotte

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

Artexoid avatar Mar 19 '16 12:03 Artexoid

Need loop! ))

trawen avatar Jun 07 '16 07:06 trawen

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

faliqaiman avatar Feb 07 '17 01:02 faliqaiman

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

nir9 avatar Feb 09 '17 15:02 nir9

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

evalibantova avatar Mar 16 '17 09:03 evalibantova

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

PurHur avatar Mar 16 '17 16:03 PurHur

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.

evalibantova avatar Mar 16 '17 20:03 evalibantova

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?

forrestbaer avatar Jun 13 '17 19:06 forrestbaer

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.

nir9 avatar Jun 16 '17 19:06 nir9

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.

PurHur avatar Sep 06 '17 16:09 PurHur

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

    }

});

}); `

studiolxv avatar Aug 03 '19 16:08 studiolxv