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ę.

(12 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Bootstrap 3 RC1 wydany!
Nowszy post →
Listy rozwijane / Dropdowns

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

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

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

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

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

Iwona 19 września 2014 o 11:45

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

Odpowiedz

Robert 3 grudnia 2014 o 13:03

Na przykład tak: <div class="col-md-6 col-md-offset-3">Tu wstaw kod karuzeli</div> i przeczytaj sobie wpis o przestawianiu kolumn: http://kursbootstrap.pl/przestawianie-kolumn/ oraz zobacz przykłady http://kursbootstrap.pl/examples/bootstrap3_offset.html to pomoże ci ustawiać elementy tam gdzie chcesz:)

Odpowiedz

Robert 5 marca 2015 o 09:04

Czy w pliku index.html masz zawarte pliki CSS i JS Bootstrapa oraz jQuery?
http://kursbootstrap.pl/wprowadzenie-do-bootstrap/
Skorzystaj z wersji z serwerami CDN bo może masz coś pokopane ze ścieżkami na serwerze.

Odpowiedz

Robert 14 kwietnia 2015 o 08:46

W CSSach musisz dodać wysokość karuzeli czyli np

div#carousel-example-generic {
height: 180px;
}

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

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

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

Robert 3 sierpnia 2015 o 11:33

http://kursbootstrap.pl/klasy-pomocnicze-helper-classes/

tutaj masz opis klas .pull-left, .pull-right i .center-block

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

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

Robert 14 września 2015 o 12:52

Dokładnie tak, zauważ, że pewnie masz ustawione wielkości fontów w px. Wtedy niezależnie od rozdzielczości ten font będzie miał taki rozmiar. Obrazek też nie zmniejsza Ci się automatycznie tylko zapewne ma klasę .img-responsive, która nakazuje mu dopasowywanie się do wielkości ekranu.

Tutaj masz info o tym jak działają media queries -> https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

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

Robert 11 stycznia 2016 o 08:02

Zamień sobie kod <span class="glyphicon glyphicon-chevron-left"></span> na wybrany przez ciebie Font Awesome.
A tutaj -> http://www.sitepoint.com/bootstrap-carousel-with-css3-animations/ masz fajny artykuł o animowaniu karuzeli za pomocą animate.css

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: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

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

Robert 20 marca 2018 o 08:02

Czy załączyłaś pliki Bootstrapa -> https://kursbootstrap.pl/wprowadzenie-do-bootstrap/

Odpowiedz