jquery-infinite-carousel - jump 3 items instead of one
Question
Successfully used jquery-infinite-carousel in the past but for my current project I need it to loop forever AND also jump 3 items at a time. Example of how it works jumping 1 at a time here.
jQuery.fn.carousel = function(previous, next, options){
var sliderList = jQuery(this).children()[0];
if (sliderList) {
var increment = jQuery(sliderList).children().outerWidth("true"),
elmnts = jQuery(sliderList).children(),
numElmts = elmnts.length,
sizeFirstElmnt = increment,
shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
firstElementOnViewPort = 1,
isAnimating = false;
//console.log("increment = " + increment);
//console.log("numElmts = " + numElmts);
//console.log("shownInViewport = " + shownInViewport);
for (i = 0; i < shownInViewport; i++) {
jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
jQuery(sliderList).append(jQuery(elmnts[i]).clone());
}
jQuery(previous).click(function(event){
if (!isAnimating) {
if (firstElementOnViewPort == 1) {
jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
firstElementOnViewPort = numElmts;
console.log("firstElementOnViewPort = " + firstElementOnViewPort);
}
else {
firstElementOnViewPort--;
}
jQuery(sliderList).animate({
left: "+=" + increment,
y: 0,
queue: true
}, "swing", function(){isAnimating = false;});
isAnimating = true;
}
});
jQuery(next).click(function(event){
if (!isAnimating) {
if (firstElementOnViewPort > numElmts) {
firstElementOnViewPort = 2;
jQuery(sliderList).css('left', "0px");
}
else {
firstElementOnViewPort++;
}
jQuery(sliderList).animate({
left: "-=" + (increment),
y: 0,
queue: true
}, "swing", function(){isAnimating = false;});
isAnimating = true;
}
});
}
};
Solution
That will take a lot of re-coding to make that plugin work the way you desire. Have you looked at jCarousel? Particularly this example?
Actually, thinking about it more... you could try triggering a click. Here is how I modified the demo:
HTML/CSS
<style type="text/css">
#simplePrevious, #simpleNext { display: none; }
</style>
<div class="demo">
<h2 class="hl">Basic example</h2>
<div id="viewport">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<a id="multi-prev"><<</a><a id="simplePrevious">Previous</a>
<a id="simpleNext">Next</a><a id="multi-next">>></a>
</div>
Script
jQuery(document).ready(function(){
jQuery('#viewport').carousel('#simplePrevious', '#simpleNext');
var simulateClicks = 3;
$('#multi-next').click(function(){
var i=0, t = setInterval( function(){
$('#simpleNext').trigger('click');
i++;
if ( i > simulateClicks - 1 ) { clearInterval(t); }
}, 500 );
});
$('#multi-prev').click(function(){
var i=0, t = setInterval( function(){
$('#simplePrevious').trigger('click');
i++;
if ( i > simulateClicks - 1 ) { clearInterval(t); }
}, 500 );
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow