Skocz do zawartości

Zdjęcie
- - - - -

Sly.js - wiele instancji slidera na jednej podstronie.

sly.js karuzela multiple

4 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 24 sierpnia 2015 - 22:42

#1
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ć? :)
  • 1

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 25 sierpnia 2015 - 10:46

#2

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ę.


  • 1

logo-green-dark.png


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 25 sierpnia 2015 - 11:08

#3

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.


  • 0

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 04 września 2015 - 23:45

#4

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ą.


  • 0

2ed58r7.png


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 15 września 2015 - 08:00

#5

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.


  • 0





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych