close
bg3

W tym wpisie pokażę Ci jak w prosty sposób przy pomocy wtyczki bxSlider utworzyć efektowny pokaz slajdów. Zaczynajmy 🙂

Na początku pobierzmy dwie wtyczki:

Pierwsza wtyczka obsłuży nasz slider i możesz ją pobrać wchodząc na tą stronę i klikając Download. Z archiwum potrzebujemy dwóch plików – jquery.bxslider.css, jquery.bxslider.min.js oraz folder images, który zawiera obrazki wykorzystywane przez skrypt.

Druga wtyczka pozwoli wywołać slider dopiero gdy obrazki na stronie zostaną załadowane (nie jest to konieczne do działania wtyczki, ale pozwala na uniknięcie kilku problemów). Możesz ją pobrać wchodząc tutaj i klikając Download ZIP. Z archiwum potrzebny jest tylko jeden plik – imagesloaded.pkgd.min.js.

Stwórzmy teraz podstawową strukturę HTML i podepnijmy potrzebne pliki:

Na początku podpinamy dwa pliki CSS reset.css (reset stylów przeglądarki) i jquery.bxslider.css. Następnie tworzymy parę znaczników <style>, między którymi umieścimy nasz kod CSS.

Przed zamykającym znacznikiem </body> podpinamy bibliotekę jQuery oraz dwa wcześniej pobrane skrypty. Poniżej tworzymy parę znaczników <script>, wewnątrz których aktywujemy wtyczkę.

Możemy teraz wewnątrz body napisać strukturę slidera:

Każdy kolejny slajd to tak naprawdę kolejny element listy – li. W tym przypadku mamy dwa takie elementy więc będą dwa slajdy. Jeśli chciałbyś dodać kolejny slajd to pod ostatnim znacznikiem </li> możesz po prostu dodać kolejny element(y) listy:

Przejdźmy teraz do wcześniej napisanych znaczników <script> i aktywujmy wtyczkę:

Po załadowaniu obrazków na elemencie z id main-slider wywołujemy funkcję bxSlider podając w parametrze tablicę z następującymi opcjami:

  • mode – sposób przejścia slajdów
  • auto – ustawione na true powoduje automatyczne przejścia slajdów
  • controls – ustawione na true powoduje pokazanie strzałek zmieniających slajdy
  • pager – ustawiony na false ukrywa kontrolki zmieniające slajdy

Wszystkie opcje możesz znaleźć tutaj.

Slider już działa, ale nie wygląda on zbyt interesująco 🙂 Pomiędzy znacznikami <style> dodajmy następujące reguły CSS:

Style są bardzo proste i większości nie wymagają tłumaczenia. Warto zwrócić uwagę na style dotyczące klasy .slide – odpowiadają za pozycję tła w sliderze. Następnie podkładamy pod każdy slajd dowolne tło i rozmieszczamy pozostałe elementy według uznania 🙂

Dzięki zwiększaniu/zmniejszaniu paddingu w klasie .main-slider-content możemy kontrolować wysokość slidera.

Po odświeżeniu strony wszystko powinno wyglądać dobrze, ale możemy zauważyć, że do slidera zostało dodane obramowanie. Można też dostrzec, że nie jest on idealnie dociągnięty to okna przeglądarki. Jest to spowodowane stylami, które domyślnie narzuca plik jquery.bxslider.css. Otwórzmy ten plik i w okolicy linii 32 wykomentujmy następujące linie:

Teraz wszystko wyświetla się bardzo dobrze a slider jest gotowy 🙂

Przykład możesz zobaczyć klikając tutaj.

Paczkę możesz pobrać tutaj.

 

Tags : bxsliderjquerypokaz slajdówsliderwtyczka