Slider z wtyczką bxSlider

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:

<!DOCTYPE html>
<html lang="pl">
  <head>

    <title>Slider</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style/reset.css" type="text/css">
    <link rel="stylesheet" href="style/jquery.bxslider.css" type="text/css">

    <style type="text/css">

    </style>
  
  </head>

<body>
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>

<script>

</script>
</body>

</html>

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:

<div id="main-container">

<div class="top-slider">
<ul class="bxslider" id="main-slider">

<li>
   <div class="slide main-slide-1">
      <div class="container">
         <div class="main-slider-content">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#">Zobacz</a>
            <img src="images/mobile.png" alt="mobile"/>
         </div>
      </div>
   </div>
</li>

<li>
   <div class="slide main-slide-2">
      <div class="container">
         <div class="main-slider-content">
            <h1>Dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#">Zobacz</a>
         </div>
      </div>
   </div>
</li>

</ul>
</div>

</div>

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:

<li>
   <div class="slide main-slide-3">
      <div class="container">
        <div class="main-slider-content">
           <h1>Dolor sit amet</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
           <a href="#">Zobacz</a>
         </div>
      </div>
   </div>
</li>

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

$('#main-container').imagesLoaded(function(){
   $('#main-slider').bxSlider({
      mode: 'fade',
      auto: true,
      controls: true,
      pager: false
   });
});

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:

.container {
   max-width: 1200px;
   margin: 0 auto;
   clear: both;
   padding: 0 15px;
}

.slide {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 0 0;
}

.bx-viewport .main-slide-1 {
   background-image: url('images/background_1.jpg');
}

.bx-viewport  .main-slide-2 {
   background-image: url('images/background_2.jpg');
}

.bx-viewport img {
   display: block;
   position: absolute;
   right: 10%;
   top: 25%;
}

.main-slider-content {
   padding: 30% 2%;
   color: #fff;
   position: relative;
   z-index: 1;
}

.main-slider-content h1 {
   font-size: 46px;
   line-height: 33px;
   font-weight: 400;
}

.main-slider-content p {
   font-size: 18px;
   margin-top: 25px;
}

.main-slider-content  a {
   position: relative;
   text-decoration: none;
   top: 30px;
   color: #fff;
   font-size: 20px;
   background: none;
   margin: 8px 0px;
   padding: 12px 30px;
   border: 1px solid #fff;
}

@media screen and (max-width: 890px) {
   .bx-viewport img {
      display: none;
   }
}

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:

/**
   -moz-box-shadow: 0 0 5px #ccc;
   -webkit-box-shadow: 0 0 5px #ccc;
   box-shadow: 0 0 5px #ccc;
   border:  5px solid #fff;
   left: -5px;
   background: #fff;
*/

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

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

Paczkę możesz pobrać tutaj.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

5 najlepszych pluginów jQuery do tworzenia sliderów 13 efektownych wtyczek scrollujących jQuery 11 przydatnych snippetów jQuery, które powinien znać każdy Webmaster
View Comments
  • Witam serdecznie. Proszę o pomoc. Nie wyświetlają mi się przyciski przód/tył, a chyba wszystko jest ustawione dobrze:
    if (!!$.prototype.bxSlider)
    $(’#homeslider’).bxSlider({
    useCSS: false,
    maxSlides: 1,
    slideWidth: homeslider_width,
    infiniteLoop: homeslider_loop,
    hideControlOnEnd: true,
    pager: false,
    autoHover: true,
    auto: homeslider_loop,
    speed: parseInt(homeslider_speed),
    pause: homeslider_pause,
    controls: true