user2142185 user2142185 - 3 months ago 19
jQuery Question

2 carousel sliders on same page

Trying to add 2 carousel sliders on the same page...
however, when I copy the code below and edit with the other slider name, just the last one works properly!
JS is:

$(document).ready(function() {

//rotation speed and timer
var speed = 5000;
var run = setInterval('rotate()', speed);

//grab the width and calculate left value
var item_width = $('#slides li', '#slides_2 li').outerWidth();
var left_value = item_width * (-1);

//move the last item before first item, just in case user click prev button
$('#slides li:first', '#slides_2 li:first').before($('#slides li:last', '#slides_2 li:last'));

//set the default item to the correct position
$('#slides ul', '#slides_2 ul').css({
'left': left_value
});

//if user clicked on prev button
$('#prev', '#prev_2').click(function() {

//get the right position
var left_indent = parseInt($('#slides ul', '#slides_2 ul').css('left')) + item_width;

//slide the item
$('#slides ul', '#slides_2 ul').animate({
'left': left_indent
}, 200, function() {

//move the last item and put it as first item
$('#slides li:first', '#slides_2 li:first').before($('#slides li:last', '#slides_2 li:last'));

//set the default item to correct position
$('#slides ul', '#slides_2 ul').css({
'left': left_value
});

});

//cancel the link behavior
return false;
});

//if user clicked on next button
$('#next', '#next_2').click(function() {

//get the right position
var left_indent = parseInt($('#slides ul', '#slides_2 ul').css('left')) - item_width;

//slide the item
$('#slides ul', '#slides_2 ul').animate({
'left': left_indent
}, 200, function() {

//move the first item and put it as last item
$('#slides li:last', '#slides_2 li:last').after($('#slides li:first', '#slides_2 li:first'));

//set the default item to correct position
$('#slides ul', '#slides_2 ul').css({
'left': left_value
});

});

//cancel the link behavior
return false;
});

//if mouse hover, pause the auto rotation, otherwise rotate it
$('#slides', '#slides_2').hover(

function() {
clearInterval(run);
},
function() {
run = setInterval('rotate()', speed);
}
);
});

//a simple function to click next link
//a timer will call this function, and the rotation will begin :)
function rotate() {
$('#next', '#next_2').click();
}


I got this code from this website:
http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery
Anyone can help?

Answer

The proper jQuery syntax for multiple selectors is:

$('#slides li, #slides_2 li')...

That said, there are a zillion free carousels out there that are properly abstracted, which avoids this whole mess altogether.

http://bxslider.com

http://getbootstrap.com/javascript/#carousel

Comments