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:
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ć:
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 grupydata-... 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-pausepo najechaniu na slajd, karuzela przestanie się obracać.
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: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.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA