Bootstrap tutorial logo

Karuzela / Slider

autor: Robert

9 sierpnia 2013

Karuzela czy też slider służy do tworzenia galerii obrazów które przewijamy za pomocą strzałek, bądź robi się to automatycznie. Zwykle wykorzystywana jest ona w głównej części strony gdy chcemy na przykład pochwalić się swoim portfolio bądź przekazać informacji o kilku produktach. Należy pamiętać, że mało kto będzie przewijać 50 czy więcej slajdów więc lepiej zamieścić w niej rzeczy najważniejsze z naszego punktu widzenia.

Kod karuzeli

Gdy nie zamkniemy karuzeli w kontenerze będzie ona sięgała krawędzi okna przeglądarki, niezależnie od rozdzielczości. Kontener doda jej marginesy po bokach a umieszczenie jej w kolumnie pozwoli nam na ustalenie pożądanego rozmiaru. Występują 2 rodzaje slidera: z opisem lub bez. Różnica w kodzie to dodanie tylko jednego diva:) Cała nasza karuzela będzie zamknięta w divie:
<div id="carousel-example-generic" class="carousel slide">
...
</div>
gdzie id="carousel-example-generic" to dowolna nazwa którą będziemy później stosować.
Wskaźniki do slajdów
Kolejnym etapem są kropki które pozwalają przenieść się do konkretnego slajdu:
<ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
Zapis data-target="#carousel-example-generic" musi prowadzić do nazwy naszej karuzeli. A ilość wpisów w znaczniku <li>...</li> musi być równa ilości slajdów. Klasa class="active" oznacza który slajd ma być pierwszy. Oczywiście tak jak cały następny kod, są one wewnątrz pierwszego diva.
Slajdy
Nasze obrazki które chcemy dodać zamykamy w divie:
<div class="carousel-inner">
...
</div>
A wewnątrz niego każdy obrazek musi znajdować się w divie:
<div class="item active">
  <img src="http://placehold.it/1280x500" alt="">
</div>

<div class="item">
  <img src="http://placehold.it/1280x500" alt="">
</div>

<div class="item">
  <img src="http://placehold.it/1280x500" alt="">
</div>
Gdy chcemy dołączyć opisy slajdów kod wygląda następująco:
Klasa <div class="item active"> wskazuje nam na pierwszy slajd który będzie wyświetlany.
Strzałki do przewijania
Nasz slider powinien także posiadać po bokach strzałki do przewijania. Tworzymy je następnująco:
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
  <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
  <span class="icon-next"></span>
</a>
Jak widzimy, tutaj: href="#carousel-example-generic" znów trzeba się odwołać do nazwy naszej karuzeli. Odwołania te służą temu by można zamieścić na stronie więcej niż 1 slider i sterować każdym z nich niezależnie.
Całość kodu
Cały kod prezentuje się następująco:
Przykład jest dostępny tu: Strona z przykładami
Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (12 głosów, średnia: 5,00 na 5)
Loading...

Komentarze: 58 komentarzy

Janek 21 stycznia 2014 o 23:39

Jest jakaś opcja aby zmienić rozmiar szerokości slideshowa ?

Odpowiedz
    Robert 22 stycznia 2014 o 09:18

    Karuzelę wystarczy zamknąć w kolumnie o odpowiedniej szerokości (col-md-4, col-md-8, col-md-12 itp)

    Odpowiedz
Ola 9 lutego 2014 o 21:48

Witam,
a jak zrobić, żeby sljader dział w slajderze? Tzn. chcę mieć dwa slajdery – jeden główny który będzie dzielił się na kategorie i drugi który będzie mieć obrazki z danej kategorii. Prawie mi się to udało: kropki z głównego slajdera zamieniłam na nazwy kategorii i do pierwszego slajdu(głównego slajdera) wsadziłam slajder (oczywiście pozmieniałam nazwę, itp) umieściłam obrazki (slajdery) z danej kategorii i wszystko działa okej. Problem dopiero pojawia się wtedy kiedy przechodzę do drugiego slajdu (głównego slajdera) i wyświetla się ok, ale jak chce wrócić do wcześniejszego (pierwszego slajdu) to nic się nie wyświetla, a w kodzie dany item jest niewidoczny (w sensie jakby miał klasę hidden). Wiesz może w czym tkwi problem? Czy może po prostu nie da się tak zrobić?? :(

Odpowiedz
    Robert 10 lutego 2014 o 09:03

    Trochę nie do końca kumam o co chodzi ale na stronie możesz mieć niezliczoną ilość karuzel, ważne żeby miały inne nazwy ale bootstrapowe klasy pozostawiasz bez zmian. Może gdzieś tu tkwi problem?

    Odpowiedz
Wojciech 9 lutego 2014 o 22:41

U mnie paginacja ucieka do góry oraz boczne strzałki też poszły do góry. Jak to mogę skorygować?

Odpowiedz
    Robert 10 lutego 2014 o 09:01

    Na pewno masz zamknięte wszystkie divy, nie nadanego ręcznie stylu dla carousel-indicator albo carousel-control?

    Odpowiedz
Karol 15 lutego 2014 o 22:31

Mam problem z automatycznym startem slidera. W jednym z artykułów radził Pan dodać javascript
$(‚.carousel’).carousel({
interval: 5000})
,gdzie interval to czas w milisekundach.
Niestety po dodaniu skryptu slider nie startuje automatycznie, próbowałem dodać zarówno w sekcji head jak i na końcu przed zamknięciem znacznika body. Nie potrafię rozwiązać tego problemu. Może ma Pan jakieś rady?

Odpowiedz
    Robert 20 lutego 2014 o 11:58

    $(‘.carousel’) to klasa CSS karuzeli, nie zmieniałeś jej na swoją? Czy JS jest zamknięty w znacznikach <script>?
    Czy może robisz stronę na WordPressie? Wtedy trzeba na przykład zamiast $ użyć jQuery

    Odpowiedz
      Karol 23 lutego 2014 o 00:24

      „zamiast $ użyć jQuery” w przypadku joomli jest to również prawidłowe rozwiązanie;) dziękuję

      Odpowiedz
Krystian 20 lutego 2014 o 11:38

Hej! Jak zrobić, żeby karuzela wyświetlała dajmy na to 4 elementy, ale przewijała po jednym. Jednocześnie chcę, żeby była responsywna, czyli np. na tablecie niech wyświetlą się tylko 2. Jeśli dodam do item klasy col-*, to się ustawiają prawidłowo, ale gdy dodam pierwszym czterem .active, to jsvascript przestaje działać. :/ Jak to obejść?

Odpowiedz
    Robert 20 lutego 2014 o 12:07

    Tylko 1 element może mieć klasę active stąd błędy. Nie do końca rozumiem co masz na myśli przez 4 elementy na raz ale myślę, że trzeba by tu użyć trochę JSa do ukrywania bądź wyświetlania elementów na pojedynczym slajdzie.

    Odpowiedz
Rafał Derejczyk 3 maja 2014 o 19:03

Jeżeli nie działa Wam automatyczny start slidera użyjcie data-ride=”carousel” dla karuzeli np. Pozdrawiam.

Odpowiedz
Iwona 19 września 2014 o 11:13

Jak poprawić karuzelę, jeżeli nie działa na wordpressie?

Odpowiedz
    Iwona 19 września 2014 o 11:45

    Chodzi mi o to, że przewijanie karuzeli nie działa. Ani strzałkami, ani automatycznie.

    Odpowiedz
Natalia 3 grudnia 2014 o 12:58

Witam. Chciałabym mieć slider takiej wielkości, jak tutaj: http://kursbootstrap.pl/examples/homepage.html# ale wyśrodkowany. Jak go wyśrodkować?

Odpowiedz
Natalia 5 grudnia 2014 o 15:59

Witam. Chciałabym, żeby pod moim sliderem był cień taki, jak tu: http://nimbupani.com/drop-shadows-with-css3.html
Próbowałam dopisywać style do <div class="carousel-inner"…. ale tam są :before i :after i nie bardzo umiem sobie z tym poradzić.
Jak to zrobić?

Odpowiedz
Mariusz 4 marca 2015 o 18:16

Witam :)
Mam cały kod karuzeli wstawiony ze zdjęciami, ale nie chce w ogóle ruszyć. Nawet przyciski do: „następne zdjęcie” nie reaguję na naciśniecie. Nie wiem czy mam dodać jakiś skrypt, czy coś innego zrobić. Z góry dziękuje za pomoc :D

Odpowiedz
Łukasz 12 kwietnia 2015 o 14:02

Chciałbym aby moja karuzela miała szerokość auto a wysokość 180px. Gdzie to zmienić?

Odpowiedz
    Robert 14 kwietnia 2015 o 08:46

    W CSSach musisz dodać wysokość karuzeli czyli np

    div#carousel-example-generic {
    height: 180px;
    }
    
    Odpowiedz
radogost 27 kwietnia 2015 o 15:35

witam
mam problem z dwoma rzeczami w karuzeli, jak zrobić jednolity kolor bez pociemnienia po bokach oraz jak zmienić kolor kropek symbolizujących odpowiednie slajdy

Odpowiedz
    Robert 27 kwietnia 2015 o 15:54
    .carousel-control.left .carousel-control.right {
    background: none;
    }
    .carousel-control:hover, .carousel-control:focus {
    opacity: 1;
    }
    .carousel-control .icon-next:before .icon-prev:before {
    color: #ff00ff;
    }
    
    .carousel-indicators .active {
    background: #ff00ff;
    }
    
    Odpowiedz
rafał 27 maja 2015 o 11:27

Witam mam problem z dostosowaniem slidera do całej szerokości przeglądarki chcę żeby nie było żadnych marginesów ja np kopiuję ze strony bootstrapa cały kod wstawiam zdjęcia i bez względu na rozdzielczość mam te cholerne marginesy podobnie kopiuję kod z kursu bootstrap który kupiłem i to samo chociaż u autora marginesów nie ma…. co to może być ???

Odpowiedz
rafał 27 maja 2015 o 11:29

i dodam jeszcze że nie zamykam karuzeli w kontenerze tak jak Ty wspomniałeś tutaj na początku

Odpowiedz
rafał 27 maja 2015 o 11:35

dodam że nie mam żadnego kontenera o jakim Ty wspominałeś na początku

Odpowiedz
    Robert 29 maja 2015 o 08:28

    W bootstrapie mamy 2 rodzaje kontenerów .container, który zamyka stronę i dodaje jej marginesy, oraz .container-fluid, który nie posiada marginesów i wyświetla się na całej szerokości przeglądarki.

    Przykład z karuzelą w zwykłym kontenerze -> http://www.bootply.com/WS2hRJ7W0z

    Przykład w container-fluid -> http://www.bootply.com/prsjjlpwbI

    Odpowiedz
      Tomek 22 czerwca 2015 o 22:06

      Cześć mam slider wrzucony na całą szerokość strony i umieszczam w nim grafikę, działa responsywność przy zmniejszaniu jest ok. Co zrobić by przy wysokich rozdzielczościach obrazek w sliderze rozciągnął się na całą szerokość okna przeglądarki bo w tym momencie zostaje tam „przestrzeń” a obrazek się wyśrodkowuje. Pozdrawiam

      Odpowiedz
        Robert 23 czerwca 2015 o 08:52

        Ogólnie rzecz biorąc, jeśli masz obrazek o szerokości mniejszej niż twoja maksymalna rozdzielczość ekranu to pojawią się po bokach paski. Jeśli taki obrazek rozciągniesz to nie będzie on dobrze wyglądał dla wyższych rozdzielczości (pojawi się „pikseloza”) dlatego myślę, że powinieneś wrzucić slajd z obrazkiem o szerokości 1920px.

        Odpowiedz
Paweł 2 lipca 2015 o 22:53

Witam, mam serwer wamp korzystam z wordpres w wersji mutisite i normalny 4.2 ,bootstrap bez wersji CDN , niestety slidery raz sa a po chwili znikaja , dlaczego?

Odpowiedz
    Robert 3 lipca 2015 o 07:50

    Ale znika cały slider czy nie wyświetla się obrazek. Może masz złą ścieżkę do grafiki?

    Odpowiedz
      Paweł 3 lipca 2015 o 21:54

      Juz jest ok. Błednie wprowadzalem funkcje „get_template_directory_uri()/sciezka dostepu do obrazka”, teraz mam petle wp_query i mam slide’y z postów i jest ok wszytsko dziala poprawnie.Podobnie jest z np akordeonem ,WP na wszystko chce petli…pozdr.

      Odpowiedz
Łukasz 23 lipca 2015 o 20:37

Witam,

czy da się zrobić że by obrazki były na środku lub po lewej stronie albo po prawej . Jak tak to jak to zrobić

Odpowiedz
Piotr 24 lipca 2015 o 18:08

Cześć, borykam się z takim problemem: kiedy dodaje zdjęcie do slidera, pozycjonuje się ono w przy lewej ścianie zamiast na środku. Co mogę robić źle? Dzięki z góry za odp.

Odpowiedz
    Robert 3 sierpnia 2015 o 11:34

    Prawdopodobnie wrzucasz zdjęcie, które jest węższe niż karuzela, dlatego nie wypełnia ono całego kontenera. Gdy chcesz centrować obrazek, nadaj mu klasę .center-block

    Odpowiedz
ZiemoT 13 września 2015 o 19:25

Witam,
Zrobiłem slidera z opisami, niestety wersja responsywna nie działa – opisy nie zmniejszają się wraz ze zmianą wielkości obrazków i wyjeżdżają poza obszar karuzeli (są częściowo niewidoczne). Jest na to jakaś rada?

Odpowiedz
    Robert 14 września 2015 o 10:21

    Ponieważ fonty same nie zmieniają swojej wielkości w zależności od rozdzielczości. Od tego mamy media queries aby zmienić ich wielkość na tablecie czy smartfonie:)

    Odpowiedz
      ZiemoT 14 września 2015 o 12:08

      Witam, czyli rozumiem, że trzeba pogrzebać w pliku CSS i odpowiednio dostosować wielkości fontów do poszczególnych szerokości ekranu, tak?

      Odpowiedz
Blażej 15 października 2015 o 21:57

Witam. Mam taki banalny problem. Nie udaje mi się dodać zdjęć do sliderów na mojej stronie. Strona zbudowana na bootstrapie. Mam taki zapis pierwotny i za chiny nie chcą mi się podmieniać te szare tła na dodane zdjęcie . Robię zapis img src=”img/img1″ i nie działa. Co robię żle ?

Odpowiedz
    Robert 16 października 2015 o 08:11

    Jeśli chodzi o stronę, którą podałeś przy dodawaniu komentarza to widocznie nie wysłałeś zmian na serwer gdyż gdy włączysz sobie podgląd źródła strony (ctrl+u w chrome) to w linii 72 odpowiedzialnej za pierwszy slajd masz zapis czyli obrazek nie ma podanej żadnej ścieżki z której miałby pobierać obrazek.

    Odpowiedz
      Blażej 16 października 2015 o 10:07

      Czołem. Tak, na serwerze nie robiłem jeszcze zmian. Klikam wszystko na razie na pulpicie, bo strona potrzebuje jeszcze liftingu i łatwiej mi jest to robić u mnie na kompie i podglądać zmiany. Pracuję na notepad++ i lokalnie się bawię – jak mam większą pulę to wtedy podmieniam index.html na serwerze.

      Odpowiedz
        Robert 16 października 2015 o 10:27

        Także wewnątrz diva z klasami .item .active masz znacznik img i tam musisz wstawić ścieżkę do obrazka. Jeśli się nie wyświetla to sprawdź czy na pewno podałeś poprawną ścieżkę.

        Odpowiedz
Łukasz 10 stycznia 2016 o 00:50

Witam, jak zmienić strzałki po bokach na własne, np takie w kółeczkach. I jak można zmienić animacje dla poszczególnych slajdów?

Odpowiedz
Natalia 25 lutego 2016 o 18:00

Witam!
Mam problem ze sliderem, mianowicie przy przewijaniu używając strzałek slider podnosi mi się do góry (góra chowa się pod paskiem nawigacyjnym). http://nzubus89.ayz.pl/
Kolejne moje pytanie czy mogę wskaźniki w postaci kropek umieścić do góry? i zmienić , żeby miały inny kształt?

Z góry dziękuję za pomoc!

Odpowiedz
    Robert 26 lutego 2016 o 09:20

    We wpisie o górnym navbarze (https://kursbootstrap.pl/opcje-wyswietlania-menu/) jest pewien zapis -> „Aby górne menu było zawsze widoczne na górze strony pomimo jej przewijania, do diva z klasą .navbar należy dołożyć klasę .navbar-fixed-top. Należy pamiętać by do sekcji body naszej strony dodać w stylach CSS padding o wartości minimum 70px gdyż inaczej treść naszej strony będzie się chowała pod paskiem menu.” :)

    Aby przenieść kropki na górę w swoim pliku CSS dodaj: .carousel-indicators { top:20px }

    Odpowiedz
Łukasz 6 marca 2016 o 23:10

Mam problem z karuzelą. jak następuje przesunięcie się obrazka to czcionka a menu mi się zmienia (tylko w czasie ruchu zdjęcia). poza tym używam scrollSpy i jak próbuje nacisnąc na strzałki sterujące to po prostu cała strona scrolluje się do początku div’a z kacuzelą. jest to trochę problematyczne bo psuje mi cały efekt.

Odpowiedz
    Łukasz 6 marca 2016 o 23:13

    Przepraszam, nie scrollSpy jest problemem tylko funkcja płynnego przewijania strony.

    Odpowiedz
    Robert 7 marca 2016 o 07:58

    Przyciski przewijania karuzeli są podpięte do elementu <a> i twój plugin przewijania bierze je za linki, do których ma przewijać. Spróbuj zamienić a na span lub button lub przeczytaj dokumentację tego płynnego przewijania bo pewnie umożliwia wyłączenie jakiś elementów.

    Odpowiedz
      Łukasz 7 marca 2016 o 08:41

      z przewijaniem sobie poradziłem, wystarczyło zmienić ‚ a[href*=”#”] na ‚.navbar-nav a[href*=”#”] i problem się rozwiązał. Jednak nadal jest problem z czcionką menu. I to głównie w Chrome. jak następuje ruch slidera to literki robią się na chwilę cieńsze. głupio to wygląda bo literki w menu pulsują wraz z ruchem slidera. takie sam literki mam jak menu (przypięte do górnej krawędzi strony) jest bezpośrednio nad divem ze sliderem.

      Odpowiedz
Tomek 7 marca 2016 o 08:44

Witam
Mi karuzela działa poprawnie ale mam problem tego typu że, po najechaniu myszką na karuzelę przewijanie się zatrzymuje do momentu aż myszka z powrotem zjedzie z karuzeli. Dodam tylko że karuzela jest jako tło na całą stronę.
Dodatkowo mam pytanie. Jak zrobić żeby w karuzeli zamiast przewijania było przenikanie zdjęć.

Pozdrawiam

Odpowiedz
Franciszek 20 marca 2016 o 15:50

Witam. Skopiowałem kod, edytowałem img src… a mimo to slider nie działa. Nie ma możliwości nawet zmiany slajdu. Tak jakby w ogóle nie działał.

Odpowiedz
Niewiarygodne 22 marca 2016 o 22:41

Jak to widzisz z reklamami Adsense ?
Chodzi o dopasowanie pod media.

Odpowiedz
    Robert 23 marca 2016 o 07:52

    Adsense udostępnia obecnie responsywne jednostki reklamowe, które same się dopasowują do rozdzielczości. Także nie trzeba się martwić o ich rozmiary.

    Odpowiedz
tomek 22 kwietnia 2016 o 10:05

Hej, mam pytanie czy da się zrobić aby strzałki nawigacji były obie po prawej stronie i działały prawidłowo ?

Odpowiedz
Marta 8 maja 2016 o 17:10

Mam na stronie karuzelę w sekcji O PROJEKCIE oraz OFERTA, ale jest problem z wyśrodkowaniem tekstu w pionie. Treści są zakotwiczone do lewego górnego rogu kontenera. Źle to wygląda. W projekcie graficznym mam je wyśrodkowane w pionie względem strzałek. Czy jest możliwe wyśrodkowanie w pionie treści (o różnej wysokości!!!) w karuzeli???

Odpowiedz