Z różnych karuzel tam, wiele do Mootools jak dobrze, nadal postanowił napisać własną klasę Carousel, na kilka dobrych powodów
1. Poszukujemy funkcję stronicowania (aby móc skakać konkretnego pokazu / krok w karuzeli).
2. Zainteresowanie wolność z umieszczania na lewy i prawy przycisk / linki, gdzie nigdy mi się podoba.
3. Większa kontrola nad Schodami slajdów.
I udało się stworzyć nową karuzeli z powyższych cech ... jak poniżej ... Zapraszam do sugerują żadnych zmian należy wymagać!
Mój przykład wygląda tak ... [ Demo Zobacz ]
Zobacz demo | DLA Pobierz mootools Carousel Z stronicowania w wersji 1.0 (pobrany 2006 razy)
1. Przywoływanie karuzela
Możesz łatwo dodać stronicowania do karuzeli, po prostu ustawiając flagę stronicowania, który jest ostatni parater przeszedł podczas tworzenia instancji MooCarousel na true (chcę stronicowania) lub false (dawca chce stronicowania).
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true); / / ns = liczba slajdów, sss = wielkość kroku slajdów
I oczywiście możesz zmienić wygląd-n-styl tych achors stronicowania jak należy modyfikując CSS.
. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging prąd, carousel_paging strona {outline: none; szerokość:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
. Carousel_paging: hover, carousel_paging aktualny {background: # 4D4D9B; color: # FFFFFF;}..
Dobrze! jest mały problem choć Kotwy stronicowania jeśli ustawione, to zostanie on generowany zawsze po Carousel komponentu. Chciałem zrobić to dynamiczny, jak również, ale potem po prostu zachować scenariusz do wydmuchiwania proporcjach, postanowiłem go pominąć.
Ale wiesz, trochę Javascript, można łatwo zmodyfikować kod generacji stronicowania w MooCarousel klasy zadowolić swoich potrzeb.
2. Dostosowywanie Lewa i prawa ikony
Możesz zmienić położenie, obrazy lub jakikolwiek displat mienia z przycisków lewego i prawego po prostu zabawy z CSS. aby móc zmieniać miejsca docelowe o buttoms lewego i prawego był rzeczywisty powód, dla mnie do prawej mojej naszej Carousel klasy.
Ponieważ ten MooCarousel Class, przyjmuje id jest z tych przycisków, można rzeczywiście umieścić te przyciski dowolnym miejscu na stronie, proszę ... nie muszą być w hierarchii elementów, jak w moim przykładzie.
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true);
CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}
. Carousel_container_r {background-position: 0-38px;}
. Carousel_container_l {background-position: 0-58px;}
3. Dostosowywanie kroki slajdów
Co mam na myśli MOICH Dostosowywanie KROKI slajdów?
Większość Karuzele przesuń wypełniona z widocznym oknem. Więc mówisz, że miał cztery elementy (jak w mojej próbce powyżej), to przesunąć wszystkie cztery elementy. Z tego Carousel, możecie przekazać liczbę slajdów i wielkość kroku wybór.
var carousel1 = new MooCarousel ("carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft", "carousel1_moveright" c_ns, c_sss, true);
c_ns = liczba slajdów, c_sss = wielkość kroku slajdów
Także w moim example1 mam calcuted wielkość kroku slajdów, oparty na logice gdzie, wiem liczbę elementów, szerokość na każdej pozycji i marże, które złożyły po każdej pozycji w moim CSS.
/ * Dla hulanka 1 * /
var c1_w = 92 / / hulanka Szerokość produktu
var c1_n = 10 / / Całkowita liczba pozycji hulanka Porównanie
var c1_pp = 4 / / Liczba pozycji hulanka Porównanie perpage
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp / / sss = wielkość kroku slajdów
var c1_ns znaku = parseInt (((c1_w * c1_n) / c1_sss) + 0,5) / / ns = liczba slajdów
c1_sss + = c1_marginFactor / / sss slide = wielkość kroku, 51 na marginesie
Wymagania: Mootools 1.2
Zobacz demo | DLA Pobierz mootools Carousel Z stronicowania w wersji 1.0 (pobrany 2006 razy)
