Na jednej podstronie chcę użyć wiele instancji karuzeli od http://darsa.in/sly/
Mam kawałek HTML:
<div class="frame" id="cycleitems" style="overflow: hidden;"> <ul class="clearfix"> <li class="">0</li> <li class="">1</li> <li class="">2</li> <li class="">3</li> <li class="">4</li> <li class="">5</li> </ul> </div> <div class="controls center"> <button class="btn prev"><i class="icon-chevron-left"></i> prev</button> <div class="btn-group"> <button class="btn pause"><i class="icon-pause"></i> pause</button> <button class="btn resume"><i class="icon-play"></i> resume</button> <button class="btn toggle"><i class="icon-pause"></i> toggle</button> </div> <button class="btn next">next <i class="icon-chevron-right"></i></button> </div>I takich karuzeli jak ta wyżej chce mieć więcej. Takich samych. Oczywiście zawartością nie będą liczby, tylko jakieś zdjęcia itd. Ale nie w tym rzecz.
Oraz js:
(function () { var $frame = $('#cycleitems'); var $wrap = $frame.parent(); // Call Sly on frame $frame.sly({ horizontal: 1, itemNav: 'basic', smart: 1, activateOn: 'click', mouseDragging: 1, touchDragging: 1, releaseSwing: 1, startAt: 0, scrollBar: $wrap.find('.scrollbar'), scrollBy: 1, speed: 300, elasticBounds: 1, easing: 'easeOutExpo', dragHandle: 1, dynamicHandle: 1, clickBar: 1, // Cycling cycleBy: 'items', cycleInterval: 1000, pauseOnHover: 1, // Buttons prev: $wrap.find('.prev'), next: $wrap.find('.next') }); // Pause button $wrap.find('.pause').on('click', function () { $frame.sly('pause'); }); // Resume button $wrap.find('.resume').on('click', function () { $frame.sly('resume'); }); // Toggle button $wrap.find('.toggle').on('click', function () { $frame.sly('toggle'); }); }());No i widzę, że funkcja wołana jest dla danego ID. Ale jak chce wiele takich samych karuzel z inną treścią, to nie będę dla każdego robić dynamicznie innego ID i tworzyć nowej funkcji. Jak najlepiej to rozwiązać?