After implementing a minimal carousel, I discovered that it functions perfectly with 3 or more slides. However, as soon as I remove some slides, issues start to arise. Some of the problems I encountered include:
- The sliding animation is removed on 'next'
- The divs begin to flicker
- The animation breaks entirely
I attempted some solutions involving .clone() on the initial slide and then using .append() to add it to the end of the container. While this approach somewhat worked, it usually only allowed for one rotation before getting stuck on slide2.
Below is the logic I developed for handling clicks on the prev/next buttons:
var before_clone = $(elm + ':first').clone();
var after_clone = $(elm + ':last').clone();
$('#buttons a').click(function(e) {
//slide the item
if (container.is(':animated')) {
return false;
}
if (e.target.id == previous) {
container.stop().animate({
'left': 0
}, 1500, function() {
//container.find(elm + ':first').before(container.find(elm + ':last'));
container.append(after_clone);
container.find(elm + ':last');
resetSlides();
});
}
if (e.target.id == next) {
container.stop().animate({
'left': item_width * -1
}, 1500, function() {
//container.find(elm + ':last').after(container.find(elm + ':first'));
container.append(before_clone);
container.find(elm + ':first');
resetSlides();
});
}
//cancel the link behavior
return false;
});
And here is the logic I implemented for managing automatic animations:
function rotate() {
$('#next').click();
container.append(before_clone);
container.append(after_clone)
}
Here are two Fiddles that may help diagnose my problem:
Link to original code (ensure to remove/comment out 2 of the lis)
If you have any insights or solutions to offer, I would greatly appreciate your assistance in resolving this issue! Thank you!