Looking to extend Twitter Bootstrap 2 carousel - display a set of thumbnails at a time like jcarousel
I would like the carousel to LOOP and not stop once it gets to the end. An on/off option would be great so it can be used as stock or with the loop active.
Not sure how to implement this but this snip of jcarousel is hitched with bootstarp carousel to give me scroll the items one by one.
Thanks.
$(function () {
var _next, _prev;
_next = $.fn.carousel.Constructor.prototype.next;
_prev = $.fn.carousel.Constructor.prototype.prev;
$.fn.carousel.Constructor.prototype.next = function() {
this.$element.trigger('pln.next');
return _next.call(this);
};
$.fn.carousel.Constructor.prototype.prev = function() {
this.$element.trigger('pln.prev');
return _prev.call(this);
};
$('div.carousel.jcarousel').each(function() {;
$(this).swiperight(function() {
$("#myCarousel").carousel('prev');
});
$(this).swipeleft(function() {
$("#myCarousel").carousel('next');
});
var item_width, stop_pos, total_items, total_width, visible_items, visible_width, _carousel, _slider;
_carousel = $(this);
total_items = _carousel.find('li').length;
item_width = _carousel.find('li:first').outerWidth(true);
total_width = item_width * total_items;
_carousel.find('.item:first').width(total_width); // lets shrink the actual container to it's real size
visible_items = Math.round(_carousel.find('.carousel-inner').width() / item_width);
visible_width = visible_items * item_width;
stop_pos = visible_width - total_width;
_slider = _carousel.find('.item:first');
_slider.data('to', 0);
_carousel.carousel('pause').on({
'pln.prev': function() {
if (_slider.position().left < 0 && _slider.position().left === _slider.data('to')) {
_slider.data('to', _slider.position().left + item_width);
_slider.animate({
left: "+=" + item_width + "px"
}, 'fast'); // lets move the slider
}
return false;
},
'pln.next': function() {
if (_slider.position().left > stop_pos && _slider.position().left === _slider.data('to')) {
_slider.data('to', _slider.position().left - item_width);
_slider.animate({
left: "-=" + item_width + "px"
}, 'fast');
}
return false;
}
});
});
});
