Bootstrap Karuzela – prosty slider

Karuzela / slider bootstrap

Kategoria wpisu Kurs Bootstrap, Kursy Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Wśród wielu ciekawych możliwości jakie oferuje Bootstrap warto wymienić Bootstrap Carousel (karuzelę) czyli bardzo prosty pokaz zdjęć.

Demo

Slider służy do tworzenia galerii przesówających się obrazów. Wbudowany jako plugin jest bardzo prosty w obsłudze i praktycznie do użycia po dodaniu do strony biblioteki Twitter Bootstrap. Potrzebne pliki to z niej to:

  • bootstrap.min.css – czyli plik CSS
  • jquery.min.js – standardowa biblioteka jQuery przydatna nie tylko przy pracy z bootstrapem
  • bootstrap.min.js – „plik z gotowymi rozwiązaniami”

Do użycia karuzeli nie musimy nic już dodatkowo instalować wszystko co jest nam potrzebne już mamy musimy ją jedynie wywołać.

Przykładowa karuzela

W tym celu możemy wykorzystać poniższy kod karuzeli:

W powyższym przykładzie mamy tylko 3 slidy nic jednak nie stoi na przeszkodzie by zwiększyć lub zmniejszyć ich ilość.

Każdy nowy slide to:

Pierwszy slide (ten od którego zaczynamy wyświetlania) powinien posiadać ustawienie <div class=”item active”>.

Poruszanie się po karuzeli

Za wyświetlanie strzałek umożliwiających przechodzenie do poprzedniego lub następnego slidu, obrazka odpowiada kod:

Dodatkowo w powyższym przykładzie dodałam również możliwość swobodnego poruszania się dzięki wskaźnikom pokazującym nie tylko aktualnie na, którym obrazku się znajdujemy, ale także ile jest ich jest można też za ich pomocą przejść do konkretnego slidu.

W przykładowej karuzeli został również dodany tekst np.:

Jeżeli chcemy uzyskać efekt bez niego wystarczy usunąć ten fragment kodu.

 

Jak widać karuzela składa się z kilku rożnych elementów, są one ze sobą połączone dzięki #myCarousel, jest to nazwa tej konkretnej karuzeli. Stosując rożne nazwy możemy umieścić na stronie kilka rożnych karuzeli.

Na wygląd slidera (kolor czcionki, zamiana kropek w prostokąty) można wpływać za pomocą CSS, tak więc ostateczny wygląd zależy od nas. Każdy slide może też trochę inaczej wyglądać jest to jednak kwestia indywidualnych zmian.

Warto zwrócić uwagę by użyte obrazki miały takie same wymiary.

Poniżej link do przykładowej karuzeli:

Demo

Przykładowe realizacje karuzeli na stronę internetową [CSS][JS]

Powyżej opisany wpis dotyczy kursu z bootstrapa i jest kolejną częścią tutoriala.

Frameworki CSS – Bootstrap

 

 

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel2&stacked=h

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *