itemslide
itemslide copied to clipboard
Loop Slides
Would it be possible to loop slides as a continuous carousel?
Yes i'll add this feature next release.
+1 I'd love that option too :)
+1 Oh OH!!! Yes yes!! Excellent script, thank you but i want a loop mode too!! :-)
Need loop! ))
Loop needed! And how to make it start on center?
@faliqaiman On the website it starts on center so you can just use the code from the website...
It's been more than a year. Is the looping feature ever coming?
Github is not a user whishlist. Please clone the repo, make the changes and then make a merge request. Thanks
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.
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?
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.
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.
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);
}
});
}); `