06 – Karuzela w Bootstrapie – przykładowe funkcje.

Witaj,
Jak zdążyliśmy już zauważyć, bootstrap posiada w sobie wiele interesujących funkcji.
Dzisiaj przedstawię karuzelę i jej przykładowe funkcje w moim portfolio.

Poprzednie wpisy:

 

Karuzela służy do tworzenia galerii z przesuwających się obrazów.
Potrzebne pliki to :

  • bootstrap.min.css – czyli plik CSS
  • jquery.min.js – standardowa biblioteka jQuery
  • bootstrap.min.js – „plik z gotowymi rozwiązaniami”

Przejdźmy do przykładowej, prostej karuzeli.

1.Tworzymy nasz container czyli "pojemnik" w którym zawrzemy nasza karuzelę. Gdybyśmy tego nie zrobili, nasza karuzela byłaby na całej szerokości monitora. Wedle życzeń 😉

2. Tworzymy nasze wskaźniki zagnieżdżając je. Pierwszy wskaźnik musi mieć klasę active.
Ilość naszych wskaźników zależna jest tylko od nas - tyle ile chcemy przejść, tyle robimy wskaźników.

3. Tworzymy strzałki następny i poprzedni

4. Dodajemy nasze zdjęcia, które mają być umieszczone w karuzeli, nagłówek i paragraf - wedle uznania 😉

Ja do swojej karuzeli dodałam jeszcze przełącznik nawigacji. Efekt końcowy wygląda tak:

 

 

 

Zapraszam serdecznie do śledzenia mnie na:
LinkedIn
Twitter
Github - piotrowinka2410

Instagram
Snapchat - piotrowinka2410
Fanpage na Facebooku 

Dodaj komentarz

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