Sly.js - wiele instancji slidera na jednej podstronie.

Hej ho.

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ć?

A jak to się zachowuje gdy zamiast id podasz klasę? 

 

A może trzeba użyć funkcji each.

$('.cycleitems').each(function() {
var $frame = $(this);
var $wrap = $frame.parent();

$frame.sly({...
//reszta kodu.

});

Szczerze to nie mam pojęcia, tak tylko zgaduję.

A jak to się zachowuje gdy zamiast id podasz klasę? 

 

A może trzeba użyć funkcji each.

$('.cycleitems').each(function() {
var $frame = $(this);
var $wrap = $frame.parent();

$frame.sly({...
//reszta kodu.

});

Szczerze to nie mam pojęcia, tak tylko zgaduję.

W takim przypadku ID, czy klasa nic nie zmieniają... 
Po pracy potestuję Twoje wskazówki.

Raczej nie pomoże, ponieważ plugin jest inicjowany dla każdego elementu, który spotka na stronie:

https://github.com/d....js#L2123-L2137

Proponuję po klasie to zrobić przykładowo js-slyWrapper

 

Ogólnie przy klasach spotkałem się z błedem przy tworzeniu nawigacji. Niestety nawigacja nie działa mi dla każdego osobno, a to za sprawą tego:

https://github.com/d....js#L1548-L1562

 

Skrypt przechowuje tablicę dla nawigacji z tego co sprawdziłem, aczkolwiek w tej funkcji powyższej ona nie jest wykorzystana tylko bierze pierwsze przyciski z pierwszej instancji a więc niezbyt ładnie

 

Ogólnie można by zrobić jakiegoś contribute'a do repo aby rozwiązać ten problem bądź zgłosić issue.

Na stronie demonstracyjnej widziałem że maja osobno każdą instancje inicjowaną.

Raczej nie pomoże, ponieważ plugin jest inicjowany dla każdego elementu, który spotka na stronie:

https://github.com/d....js#L2123-L2137

Proponuję po klasie to zrobić przykładowo js-slyWrapper

 

Ogólnie przy klasach spotkałem się z błedem przy tworzeniu nawigacji. Niestety nawigacja nie działa mi dla każdego osobno, a to za sprawą tego:

https://github.com/d....js#L1548-L1562

 

Skrypt przechowuje tablicę dla nawigacji z tego co sprawdziłem, aczkolwiek w tej funkcji powyższej ona nie jest wykorzystana tylko bierze pierwsze przyciski z pierwszej instancji a więc niezbyt ładnie

 

Ogólnie można by zrobić jakiegoś contribute'a do repo aby rozwiązać ten problem bądź zgłosić issue.

Na stronie demonstracyjnej widziałem że maja osobno każdą instancje inicjowaną.

Dobra. Dynamicznie dodaje kolejne. W sumie jest ich mniej na stronie niż się spodziewałem i działa ok.