Właśnie taki efekt staram się osiągnąć dzięki karuzeli Bootstrap 3
Zamiast pokazywać tylko jedną klatkę na raz, wyświetla N klatek przesuwanych obok siebie. Następnie podczas przesuwania (lub gdy przesuwa się automatycznie), przesuwa grupę slajdów w ten sam sposób.
Czy można to zrobić za pomocą karuzeli bootstrap 3? Mam nadzieję, że nie będę musiał szukać kolejnej wtyczki jQuery ...
jquery
twitter-bootstrap-3
jquery-plugins
carousel
bootstrap-4
rodrigo-silveira
źródło
źródło
Odpowiedzi:
Od 2013-12-08 odpowiedź brzmi: nie. Efekt, którego szukasz, nie jest możliwy przy użyciu standardowej wtyczki karuzeli Bootstrap 3. Jednak tutaj jest prosta wtyczka jQuery, która wydaje się robić dokładnie to, co chcesz http://sorgalla.com/jcarousel/
źródło
Zaktualizowano 2019 ...
Bootstrap 4
Karuzela zmieniła się w 4.x, a przejścia animacji z wieloma slajdami można zastąpić w ten sposób ...
Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0 (pokaż 4, do przodu o 1 na raz)
Bootstrap 4.1.0 (pokaż 3, do przodu o 1 na raz)
Bootstrap 4.1.0 (przejdź do wszystkich 4 naraz)
Bootstrap 4.3.1 responsywny (pokaż wiele, newprzejdź do przodu 1)
Karuzela Bootstrap 4.3.1 z kartaminew
Inną opcją jest responsywna karuzela, która pokazuje i przesuwa tylko 1 slajd na mniejszych ekranach , ale pokazuje, że wiele slajdów jest większymi ekranami . Zamiast klonować slajdy, jak w poprzednim przykładzie, ten dostosowuje CSS i używa jQuery tylko do przesuwania dodatkowych slajdów, aby umożliwić ciągłe przełączanie (zawijanie):
Proszę nie kopiuj i wklejaj tego kodu. Najpierw zrozum, jak to działa.
Bootstrap 4 Responsive (pokaż 3, 1 slajd na urządzeniu mobilnym)
Przykład - Bootstrap 4 Responsive (pokaz 4, 1 slajd na urządzeniu mobilnym)
Przykład - Bootstrap 4 Responsive (pokaz 5, 1 slajd na urządzeniu mobilnym)
Bootstrap 3
Oto przykład 3.x na Bootply: http://bootply.com/89193
Musisz umieścić cały wiersz obrazów w elemencie aktywnym. Oto inna wersja, w której obrazy nie są układane w stosy przy mniejszych szerokościach ekranu: http://bootply.com/92514
EDYTUJ Alternatywne podejście do przechodzenia po jednym slajdzie na raz :
Użyj jQuery, aby sklonować następne elementy.
A następnie CSS, aby odpowiednio ustawić ...
Przed 3.3.1
Po 3.3.1
To pokaże 3 na raz, ale tylko jeden slajd na raz:
Demo Bootstrap 3.x
Nie kopiuj i nie wklejaj tego kodu. Najpierw zrozum, jak to działa. Ta odpowiedź jest tutaj, aby pomóc Ci się nauczyć .
Podwojenie tej zmodyfikowanej karuzeli bootstrap 4 działa tylko w połowie poprawnie (pętla przewijania przestaje działać).
Jak zrobić 2 suwaki bootstrap na jednej stronie bez mieszania ich css i jquery?
Bootstrap 4 Multi Carousel wyświetla 4 obrazy zamiast 3
źródło
Wszystkie powyższe rozwiązania są hackowe i błędne. Nawet nie próbuj. Użyj innych bibliotek. Najlepsze, jakie znalazłem - http://sachinchoolur.github.io/lightslider Działa świetnie z bootstrapem, nie dodaje śmieciowego html, wysoce konfigurowalny, responsywny, przyjazny dla urządzeń mobilnych itp ...
źródło
To jest działający bootstrap dla Twittera 3.
Oto javascript :
A css :
Możesz zobaczyć to w akcji na tym Jsfiddle
Powód, dla którego dodałem tę odpowiedź, ponieważ inne nie działają całkowicie. Znalazłem w nich 2 błędy, jednym z nich było to, że lewa strzałka generowała dziwny efekt, a druga dotyczyła pogrubienia tekstu w niektórych sytuacjach, które można rozwiązać, ustawiając kolor tła, aby dolny element nie był widoczny podczas przejścia efekt.
źródło
To właśnie zadziałało dla mnie. Bardzo proste jQuery i CSS, dzięki którym responsywna karuzela działa niezależnie od karuzeli na tej samej stronie. Wysoce konfigurowalny, ale w zasadzie div z pustą przestrzenią nowrap zawierającą kilka elementów inline-block i umieszcza ostatni na początku, aby cofnąć się, lub pierwszy na koniec, aby przejść do przodu. Dziękuję
insertAfter
!źródło
Aktualizacja 2019-03-06 - Bootstrap v4.3.1
Wygląda na to, że nowa wersja Bootstrap dodaje a
margin-right: -100%
do każdego elementu, dlatego w rozwiązaniu responsywnym podanym w najbardziej pozytywnej odpowiedzi tutaj ta właściwość powinna zostać zresetowana, np .:Działający kodepen z wersją 4.3.1 w LESS .
źródło
Najpopularniejsza odpowiedź jest prawidłowa, ale myślę, że kod jest bezużytecznie skomplikowany. Z tym samym css, ten kod jquery jest łatwiejszy do zrozumienia.
źródło
spróbuj tego ..... to działa w moim .... kod:
źródło
źródło
Miałem ten sam problem i opisane tutaj rozwiązania działały dobrze. Ale chciałem obsługiwać zmiany rozmiaru (i układu) okna. Rezultatem jest mała biblioteka, która rozwiązuje wszystkie obliczenia. Sprawdź tutaj: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger
Aby skrypt działał, musisz dodać nowe
<div>
opakowanie z klasą.item-content
bezpośrednio do pliku.item
<div>
. Przykład:Wykorzystanie tej biblioteki:
Aby zmienić ustawienia:
Przykład:
Jak widać, karuzela jest aktualizowana, aby wyświetlać więcej elementów sterujących po zmianie rozmiaru okna. Sprawdź
watchWindowSizeTimeout
ustawienie, aby kontrolować limit czasu reagowania na zmiany rozmiaru okna.źródło
źródło
Widziałem Twoje pytanie i odpowiedzi, i stworzyłem nową, responsywną i elastyczną karuzelę wielu elementów Gist. możesz to zobaczyć tutaj:
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
źródło
Możesz dodać wiele znaczników li in ol, które mają atrybut jako klasa o wartości „carousel-Indicators”, a za pomocą data-slide-to mają kolejne wartości, takie jak 0 do 6 lub 0 do 9.
wystarczy skopiować i wkleić element div, który ma atrybut jako klasę o wartości „item”.
To działa dla mnie.
źródło
Odwołując się do powyższego linku, dodałem 1 nową rzecz o nazwie show 4, slajd po kolei dla bootstrap 3 (v3.3.7)
KOD : - https://www.codeply.com/go/eWUbGlspqU
LIVE SNIPPET
źródło