javascript - Multiple sliders, buttons controlling all sliders -

javascript - Multiple sliders, buttons controlling all sliders -

i trying utilize slider: http://codepen.io/zuraizm/pen/vgdhl

i need have multiple sliders on page, 10 maybe more. property listings page, , lite slider.

currently when press next, slides images every slider. know id issue, there simple way prepare without having have tens of different id's?

update!

this updated pen, sliders working: http://codepen.io/luked1uk/pen/lekba appears each slider loading lastly li in ul

i thinking this...

function moveright(slider) { slider = $(slider); slider.find('ul').animate({ left: - slidewidth }, 200, function () { slider.find('ul li:first-child').appendto(slider.find('ul')); slider.find('ul').css('left', ''); }); }; $('a.control_next').click(function () { moveright($(this).parent()); });

makes global selection a.control_next , rest scoped click happened.

edit: there additional issues selecting more want. here's fixed spot.

this

$('#slider ul li:last-child').prependto('#slider ul');

becomes this

$('.slider').each(function(slider){ slider = $(slider); slider.find('ul li:last-child').prependto(slider.find('ul')); });

this takes lastly image in each slider , prepends list button work. run additional issues if image width/height/count differ or if take implement checkbox autoscroll.

to prepare though need implement much improve construction in js each slider has it's own variables. don't have time go through , set up, sorry.

javascript jquery html slider multiple-instances