JavaScript

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

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.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
<script type="text/javascript" src="https://malsup.github.com/jquery.cycle.all.js"></script>

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:

<section>

<div class="slide-wrap">

<div class="slide-container group">

<img src="ID-100104262.jpg" width="266" height="400" alt="" />

<article>
<h1>Nagłówek</h1>
<p>Maecenas vel odio vel nisl placerat dictum. In vitae pellentesque libero.</p>
<p>Zdjęcie pochodzi z www.freedigitalphotos.net</p>
</article>

</div><!-- SLIDE - KONIEC -->

<div class="slide-container group">

<img src="ID-10054133.jpg" width="400" height="266" alt="" />

<article>
<h1>Nagłówek 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium felis vel sem tempor lobortis. Vestibulum eget magna odio. Nulla ut sem sit amet sapien sollicitudin posuere. Nunc at ullamcorper lorem. Ut lacinia faucibus odio, quis mollis diam laoreet non. Cras in purus quis quam semper accumsan.</p>
<p>Zdjęcie pochodzi z www.freedigitalphotos.net</p>
</article>

</div><!-- SLIDE - KONIEC -->

<div class="slide-container group">

<img src="ID-10054110.jpg" width="400" height="266" alt="" />

<article>
<h1>Nagłówek 3</h1>
<p>Nulla ut sem sit amet sapien sollicitudin posuere. Nunc at ullamcorper lorem. Ut lacinia faucibus odio, quis mollis diam laoreet non. Cras in purus quis quam semper accumsan.</p>
<p>Zdjęcie pochodzi z www.freedigitalphotos.net</p>
</article>

</div><!-- SLIDE - KONIEC -->

</div><!-- SLIDER - KONIEC -->

</section>

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.

.slide-wrap {margin:auto; width:70%; height:400px;}

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ść.

.slide-container {
    width:100% !important;
    height: 100% !important;
}

.slide-container img {float:left; width: 30%; margin:0 5%;}

.slide-container article {float:left; width:60%;}

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:

<script type="text/javascript" >
$(document).ready(function(){
$('.slide-wrap')
.after('<div class="menu">') //tworzymy nawigacje
.cycle({
fx: 'scrollHorz', //rodzaj animacji
speed: 'fast', //szybkość przejścia
timeout: 10000, //czas między slajdami
next: '.slide-wrap',//określamy element, który przenosi nas do następnego slidu
pager: '.menu' //określamy nawigację
});
});
</script>

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:

.menu {
    width:50%;
    margin:2% auto;
    text-align:center;
}

.menu a {color:transparent; display:inline-block; width:2em; height:2em; border:5px solid #F5B0C8; border-radius:100%; background:#8190D6; margin:auto 5px;}

.menu a.activeSlide {border:none;} /*ta klasa generowana jest przez plugin - możemy ją jednak dowolnie ostylować*/

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ł

komentarzy 14

  • Awatar
    bartek

    23 listopada 2012 01:15

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

    Odpowiedz
  • Awatar
    Szybkie PITy

    9 grudnia 2012 19:20

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

    Odpowiedz
  • Awatar
    rafal`

    9 maja 2013 03:56

    nie dziala ;(

    Odpowiedz
  • Awatar
    Andrzej

    7 sierpnia 2013 09:45

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

    Odpowiedz
  • Awatar
    Maciej

    7 listopada 2013 23:22

    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.

    Odpowiedz
  • Awatar
    Maciej

    7 listopada 2013 23:47

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

    Odpowiedz
  • Awatar
    p911

    16 lutego 2014 23:26

    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,

    Odpowiedz
    • Awatar
      temasso

      4 marca 2014 13:35

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

      Odpowiedz
  • Awatar
    EdCarter

    2 października 2014 14:48

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

    Odpowiedz
    • Awatar
      Mr.Mr

      2 października 2014 15:38

      Trzeba zajrzeć do dokumentacji: http://www.malsup.com/jquery/cycle/int2.html

      btw. teraz już jest nowa wersja tego pluginu: http://jquery.malsup.com/cycle2/

      Odpowiedz
      • Awatar
        EdCarter

        2 października 2014 18:13

        dzięki, myślałem że jest jakiś patent na szybko :)
        nie za bardzo jestem oblatany w js, może mógłbyś bardziej podpowiedzieć,
        bo z tego co tam popatrzyłem to z samym przerobieniem już zainstalowanego slydera nie ma większych problemów, gorzej z zainstalowaniem, tutaj jest idealnie wyłożone :)

        Odpowiedz
      • Awatar
        Mr.Mr

        3 października 2014 11:17

        Nie rozumiem :) To powinno być proste – masz kod z przykładu, w
        wywołaniu zmieniasz tak jak jest w linku z dokumentacji (rozumiem, że to
        wiesz jak zrobić?) i pojawia sią się linki next i prev. Teraz to już
        kwestia stylowania.

        Odpowiedz

Zostaw odpowiedź