Karuzela

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Karuzela to bardzo charakterystyczny komponent Bootstrap. Doskonale nadaje się do prezentowania różnego rodzaju mediów - od zdjęć po filmy.

Nauczmy się, jak go użyć w naszym projekcie.

Najpierw musimy przygotować miejsce, gdzie umieścimy karuzele.

Pod sekcją <header> mamy sekcję <main>, a w jej wnętrzu znajduje się dobrze znany container.

To właśnie tutaj będzie większość treści naszej strony, w tym karuzela.

                                      
                                        <!--Main layout-->
<main>
  <div class="container">

  </div>
</main>
<!--Main layout-->
                                      
                                    

Wewnątrz kontenera dodajmy nową pustą sekcję, a w niej umieśćmy siatkę z 2 kolumnami - jedną szerokości 7 jednostek, a drugą długości 5 jednostek.

Nazwiemy tę sekcję "details", ponieważ będzie zawierać szczegóły naszego projektu.

                                      
                                        <!--Main layout-->
<main>
  <div class="container">


    <!-- Section: Details -->
    <section class="">
      <div class="row">

        <div class="col-lg-7">

        </div>

        <div class="col-lg-5">

        </div>

      </div>
    </section>
    <!-- Section: Details -->


  </div>
</main>
<!--Main layout-->
                                      
                                    

Krok 2 - dodaj karuzelę do pierwszej kolumny

Przejdź do strony dokumentacji karuzeli i skopiuj kod podstawowego przykładu. Następnie wklej go do pierwszej kolumny.

Po zapisaniu pliku i odświeżeniu przeglądarki powinieneś zobaczyć karuzelę. Możesz zmieniać slajdy, klikając strzałki po bokach.

Zanim przejdziemy do wyjaśnienia, jak działa karuzela, musimy naprawić jedno małe zagadnienie.

Jak widzisz, karuzela "styka się" z naszym Hero image i nie wygląda to dobrze. Przydałaby się tam przestrzeń, więc skorzystamy z już dobrze znanych odstępów.

Krok 3 - dodaj margines dolny do sekcji <header>

Jak pamiętasz z poprzednich lekcji, mamy klasy do dodawania marginesów w 5 rozmiarach.

Jednak jest jeden wyjątek - marginesy dolne, oprócz 5 podstawowych rozmiarów, mają dodatkowe 9 rozmiarów - od klasy mb-1 do klasy mb-14.

Daje to możliwość łatwiejszego pozycjonowania większych elementów (takich jak sekcje czy bloki projektowe) względem siebie i wygodniejszego tworzenia układu o spójnej kompozycji.

Jest jeszcze jedna ważna rzecz, którą chciałem wspomnieć.

Zauważ, że aby dodać odstęp między sekcją <header> , a sekcją karuzeli, możemy dodać zarówno margines dolny do sekcji <header> , jak i margines górny do sekcji carousel, a efekt wizualny będzie taki sam.

Jednak jeśli dodasz margines górny do sekcji i margines dolny podczas tworzenia układu, stworzy to niekonsekwencje i utrudni późniejsze utrzymanie projektu wizualnego.

Dlatego dobrą praktyką jest wybranie jednej metody dodawania odstępów podczas tworzenia układu i trzymanie się jej..

Jak się domyślasz, w MDB polecamy stosowanie marginesów dolnych, dlatego też dodaliśmy dodatkowe poziomy dla marginesów dolnych.

Teraz dodaj klasę mb-7 do sekcji <header>, aby dodać jej margines dolny.

                                      
                                        <!--Main Navigation-->
<header class="mb-7">
                                      
                                    

I mimochodem, dodaj klasę mb-10 do sekcji "Details", gdzie umieścimy naszą karuzelę.

                                      
                                        <!-- Section: Details -->
<section class="mb-10">
                                      
                                    

Jak działa karuzela

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Previous Next

                                      
                                        <!-- Carousel wrapper -->
<div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel">
                                      
                                    

1. Karuzela wymaga indywidualnego identyfikatora (w tym przypadku id="carouselBasicExample"). Jeśli masz więcej niż jedną karuzelę w swoim projekcie i nie mają one różnych identyfikatorów, będą się z sobą kolidować i nie będą działać poprawnie.
2. Klasy carousel, slide oraz atrybut data-mdb-ride="carousel" zapewniają podstawowy styl i funkcjonalność. Są one po prostu wymagane, aby karuzela działała poprawnie, i nie powinieneś ich ruszać ani zmieniać.
3. carousel-fade zmienia domyślną animację karuzeli z "slide" na "fade". Możesz wypróbować usunięcie tej klasy, aby zobaczyć, jak zmienia się animacja.

Wskaźniki

Jako pierwszy element potomny w komponencie karuzeli możesz zobaczyć indicators

                                      
                                        <!-- Indicators -->
<div class="carousel-indicators">
  <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"
    aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"
    aria-label="Slide 2"></button>
  <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"
    aria-label="Slide 3"></button>
</div>
                                      
                                    

To są małe kreski, które wskazują aktywny slajd. Są interaktywne i możesz na nie kliknąć, aby przejść bezpośrednio do odpowiadającego slajdu.

Jak działają wskaźniki:

1. Atrybut data-mdb-target="#carouselBasicExample" wskazuje, do której karuzeli powiązane są wskaźniki. W tym przypadku, za pomocą wcześniej wspomnianego #carouselBasicExample, wskazują na naszą karuzelę.
2. Atrybuty data-mdb-slide-to wskazują, do którego slajdu wskaźnik powinien być podlinkowany. Są one indeksowane od zera, więc pierwszy slajd = 0, drugi slajd = 1, i tak dalej.
3. class="active" wskazuje, który slajd powinien być aktywny na początku. Jeśli chcesz, aby drugi slajd rozpoczął karuzelę, musisz przenieść tę klasę do wybranego slajdu.

Carousel inner

Element carousel-inner przechowuje nasze rzeczywiste slajdy.

                                      
                                        <!-- Inner -->
<div class="carousel-inner">
  <!-- Single item -->
  <div class="carousel-item active">
    <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100"
      alt="Sunset Over the City" />
    <div class="carousel-caption d-none d-md-block">
      <h5>First slide label</h5>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>

  <!-- Single item -->
  <div class="carousel-item">
    <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp" class="d-block w-100"
      alt="Canyon at Nigh" />
    <div class="carousel-caption d-none d-md-block">
      <h5>Second slide label</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <!-- Single item -->
  <div class="carousel-item">
    <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp" class="d-block w-100"
      alt="Cliff Above a Stormy Sea" />
    <div class="carousel-caption d-none d-md-block">
      <h5>Third slide label</h5>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </div>
</div>
<!-- Inner -->
                                      
                                    

Wewnątrz elementu carousel-inner widzimy elementy carousel-item. Każdy element carousel-item to pojedynczy slajd.

                                      
                                        <!-- Single item -->
<div class="carousel-item active">
  <img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp" class="d-block w-100"
    alt="Sunset Over the City" />
  <div class="carousel-caption d-none d-md-block">
    <h5>First slide label</h5>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
  </div>
</div>
                                      
                                    

Podobnie jak wskaźniki, aktywny slajd zawiera klasę active. Możesz ją zmienić, jeśli chcesz, aby karuzela startowała z innym aktywnym slajdem domyślnie.

Następnie widzisz najważniejszego aktora w tym teatrze - element <img> zawierający obraz. Dodatkowo zawiera klasę d-block (display: block), aby zapewnić poprawne wyświetlanie obrazu, oraz klasę w-100 (width: 100%) aby obraz rozciągnął się na 100% szerokości karuzeli.

Poniżej obrazu, jako drugi element potomny carousel-item, znajduje się element carousel-caption. Za jego pomocą możesz dodać nagłówek i opis do slajdów karuzeli. Dodatkowo zawiera klasy d-none i d-md-block które sprawiają, że podpis znika na małych ekranach i pojawia się tylko na średnich i większych ekranach. Ma to na celu zapobieżenie niepożądanemu zachowaniu, ponieważ na małych ekranach podpis może całkowicie zasłonić obraz.

Elementy kontrolne

Ostatnim elementem w karuzeli są elementy kontrolne, czyli przyciski - strzałki widoczne po bokach slajdów. Są one oczywiście używane do przełączania się między slajdami.

                                      
                                        <!-- Controls -->
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample"
  data-mdb-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample"
  data-mdb-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>
                                      
                                    

Tak samo jak wskaźniki, wykorzystują atrybut data-mdb-target="#carouselBasicExample", aby wskazać, do której karuzeli powinny być podłączone.

Poza tym, reszta klas i atrybutów nie powinna być modyfikowana, ponieważ są one konieczne w obecnej postaci, aby zapewnić prawidłowe działanie elementów sterujących.

I to właśnie najważniejsze informacje na temat karuzeli. Jeśli chcesz, możesz zmienić zdjęcia i podpisy w swoim projekcie na te, które lubisz. Możesz również eksperymentować z karuzelą i zobaczyć więcej dostępnych opcji na stronie dokumentacji karuzeli.

Gdy będziesz gotowy, kliknij przycisk "next", aby przejść do następnej lekcji.