Как-то делал сайт на котором на каждой странице было от 3 до 10 каруселей.
Использовал jCarousel и написал такую функцию:
function create_slider(selector,options,autoscroll)
{
var obj = $(selector + " .slider").jcarousel(options);
if(autoscroll)
{
obj.jcarouselAutoscroll(autoscroll);
}
$(selector + ' .arr_left')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});
$(selector + ' .arr_right')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '+=1'
});
$(selector + ' .pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.jcarouselPagination({
'item': function(page, carouselItems) {
return '<a href="#' + page + '"></a>';
}
});
}
Подключал так:
$(window).load(function() {
create_slider("#main_slider",{wrap: 'circular'},{interval: 5000,target: '+=1',autostart: true});
create_slider(".facultet_slider .slider_wrapper");
create_slider(".news_block .banners_wrapper");
});
