Tworzymy własny slider przy użyciu jQuery Cycle Plugin


20 listopada 2012 / Mr.Mr


Jakiś czas temu zachęcałem Was do używania jQuery Cycle Plugin. Reklamowałem go jako bardzo przydatne narzędzie, które w bardzo wyraźny sposób usprawnia pracę nad stroną. W wymienionym wcześniej artykule zarysowaliśmy jedynie ogólne ramy tego czym jest owy plugin i jakie są jego możliwości. Teraz nadszedł czas na trochę więcej szczegółów – postaram się Wam przedstawić jak stworzyć własny sliedshow przy użyciu jQuery Cycle Plugin. Możecie to potraktować jako drugą część naszej przygody z tym pluginem. Kiedy tylko znajdę czas postaram się przygotować kolejne części, w których przedstawię bardziej zaawansowane operacje. Tymczasem zacznijmy od początku.

jQuery Cycle Plugin działa w ten sposób, że wszystkie dzieci rodzica wybranego jako kontener dla animacji stają się elementami pokazu slajdów. Stąd sam schemat działania animacji jest bardzo prosty. Jeśli nie chcemy zmieniać właściwości samego pluginu to na dobrą sprawę, po zainstalowaniu pluginu na naszej stronie, jedyne co nam zostaje to odpowiednie stylowanie elementów. Zacznijmy od początku.

Między tagami <head></head> naszego dokumentu umieszczamy powyższy kod. Oczywiście równie dobrze można te zasoby ściągnąć i linkować do konkretnego pliku.

Następnie między tagami <body></body> tworzymi następującą strukturę kodu HTML:

Klasa slide-wrap stanie się naszym kontenerem. To ona będzie rodzicem elementów, które zostaną animowane. Klasa slide-container to po prostu nasze slidy. Elementy blokowe div oznaczone tą klasą są bezpośrednimi dziećmi kontenera animacji. Kiedy mamy już odpowiedni kod HTML możemy przystąpić do pisania kodu CSS. Jak już wspomniałem to on będzie miał tutaj największe znaczenie.

Zacznijmy od naszego kontenera. Tutaj mamy właściwie zupełną dowolność. Możemy kształtować jego wygląd do woli. Jedyną rzeczą, o której trzeba pamiętać to nadanie temu elementowi „sztywnej” wysokości. Jest to konieczne aby później nadpisać style implementowane przez plugin. Oczywiście podejście do tego zagadnienia można zmienić. Równie dobrze moglibyśmy „sztywną” wielkość nadać klasie slide-container lub nawet każdemu ze slidów inną, oddzielną wysokość.

Jak widzimy klasie slide-container nadaliśmy wysokość i szerokość stu procent jej rodzica. Dodatkowo dopilnowaliśmy aby ta wielkość nadpisywała jakiekolwiek inne atrybuty. Jest to zabieg, który ma zapewnić, iż będziemy mieć kontrolę nad wielkością tego elementu. Mechanizm jQuery Cycle Plugin w pewnych przypadkach może nam „zepsuć” layout jeśli tego nie dopilnujemy. Jeśli chodzi o kod CSS to w dużej mierze mamy już podstawy za sobą. Wspomnę jeszcze tylko, że określenie stylów dla obrazów i tagu article wewnątrz klasy slide-container ma charakter czysto estetyczny i jest dowolne na dobrą sprawę.

W tym momencie nasz „slider” to klika div’ów umieszczonych jeden pod drugim. Aby mógł on przeistoczyć się w prawdziwy slider (tym razem bez cudzysłowów :) musimy dokonać operacji na DOM (document object model). Mówiąc bardziej po ludzku musimy manipulować stylami CSS tak aby ze statycznych elementów HTML stworzyć animację. Takie rzeczy osiągamy dzięki zastosowaniu JavaScript a w tym przypadku chodzi konkretnie o jQuery a jeszcze konkretniej o nasz plugin.

Między tagami <head></head> umieszczamy następujący kod:

Jeśli wykonaliśmy wszystkie kroki prawidłowo na naszym monitorze powinna pojawić się całkiem zgrabna animacja, która przewija się sama co 10s, może przewijać się po kliknięciu na slide oraz za pomocą nawigacji, której nadaliśmy jakiś przykładowy styl:

Tworzenie nawigacji jest banalnie proste. Co więcej plugin sam generuje klasę activeSlide dzięki czemu możemy dowolnie ostylować element reprezentujacy aktywny slajd.

W powyższym przykładzie zdefiniowaliśmy też element, który będzie nawigował do następnego slajdu. Określiśmy, że będzie to sam kontener slajdów (slide-wrap) dzięki czemu po kliknięciu w dowolne miejsce slidera możemy przejść do następnego slajdu.

Podsumowanie: Tym razem w bardziej rozbudowany sposób opisaliśmy jak tworzyć slider przy użyciu jQuery Cycle Plugin. Opisaliśmy więcej detali związanych ze stylami CSS i podstawy samej funkcji. Co więcej udało sie nam stworzyć slider, który nawet po wyłączeniu obsługi JavaScript i CSS nadal będzie spełniał swoje zadanie prezentacji treści. Mówiąc ściślej funkcję tę zachowają elementy HTML’owe gdyż sam slider nie będzie istniał bez obsługi JavaScript. Nadal jednak można powiedzieć, że to mało. Rzeczywiście opisywany plugin ma wiele możliwości i dlatego postaram się przygotować kolejny artykuł gdzie jeszcze bardziej zagłębimy się w jego możliwości.

Pliki źródłowe / Demo

Zdjęcie pochodzi z freedigitalphotos.net

<< Poprzedni artykuł



14 odpowiedzi na “Tworzymy własny slider przy użyciu jQuery Cycle Plugin”

  1. bartek pisze:

    Świetny artykuł, wielkie dzięki. Ale jak zrobić z pustych elementów .menu prawdziwe „menu” tzn., żeby zawierał np. tytuł artykułu?

  2. Szybkie PITy pisze:

    Ja bym nie uczył zbyt dużo ludzi stawiania sliderów, bo już i tak w polskim internecie mamy ich za dużo ;)

  3. rafal` pisze:

    nie dziala ;(

  4. Andrzej pisze:

    Dziękuję właśnie tego poszukiwałem żeby dodać do strony.

  5. Maciej pisze:

    Bardzo fajny, tylko jeżeli chcę umieścić link odsyłający do danej strony www to niestety jest to niemożliwe. Przy kliknięciu w niego, slider wczytuje nowy slajd bez wywołania żądanego adresu. Oczywiści chodzi mi o umieszczenie linku wewnątrz slidera.

  6. Maciej pisze:

    Ok, już znalazłem rozwiązanie. Należało skasować next: ’.slide-wrap’, :)

  7. p911 pisze:

    mam takie pytanie: jak zmodyfikować kod żeby wyświetlał wszystkie zdjęcia z danego folderu (np. img/). Mam jakieś 150 zdjęć więc wpisywanie ich pojedynczo ząjęłoby lata…

    z góry dziękuję i pozdrawiam,

    • temasso pisze:

      Niestety, ale w prosty sposób tego nie zrobisz (JavaScript i jego pochodne w tym nie pomogą). Najlepiej posłużyć się Pythonem listująć wszystkie pliki z katalogu a następnie generować dla każdego z nich html: i w ten sposób zautomatyzujesz swoją pracę.

  8. EdCarter pisze:

    jak zamienić nawigację z „kropek” na poprzedni/następny ?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.