Slider / Carousel

5 289 1

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

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

Kod

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.

Kod

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

Przykład

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (19 głosów, średnia: 5,00 na 5)
Loading...

Jeden komentarz w “Slider / Carousel

Netteria.NET

Gratuluje kursu bootstrapa. Zawsze jak zapomnę jak coś tam trzeba zakodować to tu zaglądam:)

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*