#52. Komponent – Karuzela

Czas na karuzele!

Stworzymy prostą karuzelę na stronie internetowej. Będzie ona sterowana za pomocą elementów span, które będą połączone z uporządkowaną listą. Slajdy w karuzeli to zwykłe obrazki.

Karuzela oparta jest o JavaScript, więc do działania konieczne jest podpięcie skryptów JS Bootstrapa oraz biblioteki jQuery. Stwórzmy więc krok po kroku nowo poznany komponent: 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

bold-dijkstra-cw85f

bold-dijkstra-cw85f danielminschinski

Opisy w karuzeli

Dodajmy opisy do naszej karuzeli. Tzw. caption (podpis), jest używany literalnie po to by podpisać zdjęcie lub dodać tekst od siebie na slajdzie.

Aby dodać opisy należy nieco rozbudować zawartość samych slajdów. Spójrz na poniższy przykład jak należy to zrobić:

 

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

nostalgic-shamir-61h7b

nostalgic-shamir-61h7b danielminschinski

Opcje karuzeli

Pokażę Ci jak zmienić konfigurację karuzeli. Bootstrap daje możliwości zmiany czasu, po którym zdjęcie automatycznie się zmieni bądź zachowania po najechaniu kursorem na slajd. Najczęściej obsługuję się takie czynności za pomocą JavaScriptu i tak samo jest też w tym przypadku. Dzięki atrybutom z grupy data-... możemy to konfigurować w kodzie HTML bez znajomości JavaScriptu. Przykładowe opcje dla karuzeli:
  • data-interval="2000" slajd zmieni się po 2 sekundach,
  • data-pause po najechaniu na slajd, karuzela przestanie się obracać.
Wymienione atrybuty dodajemy do elementu z klasą carousel. Dla opcji data-interval czas podajemy w ms, a dla data-pause w postaci ciągu znaków. W przykładzie wykorzystamy wartość hover. Przeanalizuj poniższy przykład:
PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

reverent-moser-hu7q2

reverent-moser-hu7q2 danielminschinski

Na tym zakończę temat karuzeli. Sam widzisz jak prosto dodaję się taki element na stronę. Opcji zmian zachowywania się slajdu jest naprawdę dużo. Przejdź do oficjalnej dokumentacji Bootstrapa – tam znajdziesz wszystkie możliwości frameworka.

Za tydzień w środę o 15:00 wrzucę nowy materiał o menu – z góry zapraszam.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!