Slider / Carousel - Kurs / Tutorial Bootstrap 4

Sprawdź najnowszą wersję komponentu slider / carousel zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Jeszcze do niedawna slidery święciły triumfy na stronach internetowych. Każda z nich musiała się zaczynać od karuzeli ze zdjęciami. Bardzo często moi klienci chcieli mieć po kilkanaście zdjęć na sliderze i nie docierało do nich, że to znacząco wydłuży czas ładowania strony. Poza tym, czy Wy po wejściu na stronę najpierw przeklikujecie się przez wszystkie slajdy a dopiero przechodzicie do treści czy od razu omijacie ten element bo wiecie, że nic ciekawego w nim nie znajdziecie?;) Ja nie jestem zwolennikiem tego elementu i staram się go unikać ale czasami nie mogę:)

Podstawowy przykład

Kod karuzeli w Bootstrap 4 nie jest już tak skomplikowany jak w poprzedniej wersji ale mimo wszystko rozbudowany. Na szczęście nazwy poszczególnych elementów są intuicyjne i zdradzają za co odpowiada kolejny div. Oczywiście nie musicie uczyć się składni karuzeli na pamięć bo od tego jest dokumentacja:) Ale przejdźmy do opisu.

Podstawowym elementem karuzeli jest div z klasami carousel slide oraz wybranym przez nas identyfikatorem. Gdy chcemy używać wielu sliderów na stronie to każdy z nich musi mieć unikalny identyfikator.
Przechodzimy teraz do wrappera zawierającego nasze pojedyncze slajdy. Otwieramy zatem diva z klasą .carousel-inner a w jego wnętrzu kolejnego divy z klasą .carousel-item, które są pojedynczymi slajdami. Stwórzcie sobie tyle divów z klasą .carousel-item ile slajdów chcecie. Jeden z tych slajdów (najlepiej pierwszy) powinien mieć dodatkowo klasę .active. Wewnątrz każdego pojedynczego slajdu umieścimy sobie obraz <img src="..." class="d-block w-100" alt="Opis slajdu>. Następnie zamykamy diva z klasą .carousel-inner. I już:)

Przykład

Kod

<div id="przykladowaKaruzela" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Pierwszy+slide&w=1280&h=500" alt="Pierwszy slajd">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Drugi+slide&w=1280&h=500" alt="Drugi slajd">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Trzeci+slide&w=1280&h=500" alt="Trzeci slajd">
    </div>
  </div>
</div>

Karuzela ze strzałkami do przewijania

No dobra, mamy już slider, który sam co jakiś czas zmienia obrazek. Ale dobrze by było gdybyśmy mogli je samemu przewijać. Uzyskamy do dodając trochę kodu do naszego poprzedniego przykładu. Za divem z klasą .carousel-inner ale wewnątrz głównego wrappera karuzeli czyli diva z klasami .carousel .slide musimy dodać dwa anchory. Pierwszy z nich będzie miał klasę .carousel-control-prev a drugi .carousel-control-next. Obydwa linki muszą kierować do identyfikatora naszej karuzeli. Całość kodu strzałek jest trochę bardziej rozbudowana. Zapraszam do poniższego kodu by się z nim zapoznać.

Przykład

Poprzedni Następny

Kod

<div id="przykladowaKaruzela2" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Pierwszy+slide&w=1280&h=500" alt="Pierwszy slajd">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Drugi+slide&w=1280&h=500" alt="Drugi slajd">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Trzeci+slide&w=1280&h=500" alt="Trzeci slajd">
    </div>
  </div>
  <a class="carousel-control-prev" href="#przykladowaKaruzela2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Poprzedni</span>
  </a>
  <a class="carousel-control-next" href="#przykladowaKaruzela2" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Następny</span>
  </a>
</div>

Karuzela ze znacznikami

Skoro wyświetliliśmy już strzałki to teraz pora na znaczniki, które pozwalają się przełączyć na dowolny slajd. Tutaj, będziemy bazować na przykładzie karuzeli ze strzałkami, ale jeśli ich nie potrzebujecie to możecie rozbudować pierwszy przykład ze strony. Tym razem kod będziemy dopisywać nad divem, który zawiera nasze slajdy czyli ma klasę carousel-inner. Twórcy Bootstrapa wykorzystali tutaj znacznik <ol> w którym należy umieścić tyle elementów <li> ile mamy slajdów. Każdy element listy musi mieć atrybuty data-target=#"identyfikatorKaruzeli" oraz data-slide-to="0" gdzie zero zamieniamy na kolejne numery slajdów. Spójrzcie na przykład.

Przykład

Poprzedni Następny

Kod

<div id="przykladowaKaruzela3" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#przykladowaKaruzela3" data-slide-to="0" class="active"></li>
    <li data-target="#przykladowaKaruzela3" data-slide-to="1"></li>
    <li data-target="#przykladowaKaruzela3" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Pierwszy+slide&w=1280&h=500" alt="Pierwszy slajd">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Drugi+slide&w=1280&h=500" alt="Drugi slajd">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Trzeci+slide&w=1280&h=500" alt="Trzeci slajd">
    </div>
  </div>
  <a class="carousel-control-prev" href="#przykladowaKaruzela3" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Poprzedni</span>
  </a>
  <a class="carousel-control-next" href="#przykladowaKaruzela3" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Następny</span>
  </a>
</div>

Karuzela z tekstem

Mamy już karuzelę ze strzałkami oraz znacznikami. Dobrze by było dodać do niej trochę tekstu. I tym się teraz zajmiemy. Wewnątrz diva, który zawiera nasz obrazek czyli .carousel-item musimy, pod obrazkiem, dodać kolejny div. Musi on mieć kilka klas .carousel-caption .d-none .d-md-block. O klasach .d-* będzie później, póki co musicie wiedzieć, że to połączenie ukrywa tekst na tabletach i smartfonach. Gdy chcecie zachować opis karuzeli na tych urządzeniach, usuńcie je ze swojego kodu. Wewnatrz tego diva możemy umieszczać zarówno znaczniki <h*> jak i inne odpowiadające za tekst, na przykład paragrafy .

Przykład

Pierwszy slajd

Opis pierwszego slajdu

Drugi slajd

Opis drugiego slajdu

Trzeci slajd

Opis trzeciego slajdu

Poprzedni Następny

Kod

<div id="przykladowaKaruzela4" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#przykladowaKaruzela4" data-slide-to="0" class="active"></li>
    <li data-target="#przykladowaKaruzela4" data-slide-to="1"></li>
    <li data-target="#przykladowaKaruzela4" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Pierwszy+slide&w=1280&h=500" alt="Pierwszy slajd">
      <div class="carousel-caption">
        <h5>Pierwszy slajd</h5>
        <p>Opis pierwszego slajdu</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Drugi+slide&w=1280&h=500" alt="Drugi slajd">
      <div class="carousel-caption">
        <h5>Drugi slajd</h5>
        <p>Opis drugiego slajdu</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://placeholdit.imgix.net/~text?txtsize=107&txt=Trzeci+slide&w=1280&h=500" alt="Trzeci slajd">
      <div class="carousel-caption">
        <h5>Trzeci slajd</h5>
        <p>Opis trzeciego slajdu</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#przykladowaKaruzela4" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Poprzedni</span>
  </a>
  <a class="carousel-control-next" href="#przykladowaKaruzela4" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Następny</span>
  </a>
</div>