Plusieurs curseurs, boutons contrôlant tous les curseurs

J’essaie d’utiliser ce curseur: http://codepen.io/zuraizm/pen/vGDHl

Je dois avoir plusieurs curseurs sur la page, jusqu’à 10 peut-être plus. Il s’agit d’une page de liste de propriétés, et il s’agit d’un curseur très léger.

Actuellement, lorsque vous appuyez sur suivant, il fait glisser les images pour chaque curseur. Je sais que c’est un problème d’identification, mais existe-t-il un moyen simple de résoudre ce problème sans avoir à avoir des dizaines d’identifiants différents?

METTRE À JOUR!

Voici mon stylo mis à jour, avec les curseurs fonctionnant: http://codepen.io/LukeD1uk/pen/LEKBa Mais il semble que chaque curseur charge le dernier LI dans UL

Je pensais à quelque chose comme ça …

 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()); }); 

Cela fait en sorte que la seule sélection globale soit a.control_next et que le rest soit étendu à l’endroit où le clic a réellement eu lieu.

EDIT: Il y a quelques problèmes supplémentaires avec la sélection plus que vous le souhaitez Voici un autre point fixe.

Ce

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

Devient ceci

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

Cela prend la dernière image de chaque curseur et l’ajoute à la liste pour que le bouton Précédent fonctionne. Vous rencontrerez des problèmes supplémentaires si la largeur / la hauteur / le nombre des images diffèrent ou si vous choisissez d’implémenter la case à cocher défilement automatique.

Pour résoudre ces problèmes, vous devez toutefois implémenter une structure bien meilleure dans le fichier js afin que chaque curseur ait ses propres variables. Je n’ai pas vraiment le temps de passer à travers et de mettre cela en place, désolé.