Dies ist der Effekt, den ich mit dem Bootstrap 3-Karussell erzielen möchte
Anstatt jeweils nur einen Frame anzuzeigen, werden N Frames nebeneinander angezeigt. Wenn Sie dann schieben (oder wenn es automatisch gleitet), verschiebt es die Gruppe von Folien wie es ist.
Kann dies mit dem Karussell von Bootstrap 3 durchgeführt werden? Ich hoffe, ich muss nicht nach einem weiteren jQuery-Plugin suchen ...
jquery
twitter-bootstrap-3
jquery-plugins
carousel
bootstrap-4
Rodrigo-Silveira
quelle
quelle
Antworten:
Ab dem 08.12.2013 lautet die Antwort nein. Der gesuchte Effekt ist mit dem generischen Karussell-Plugin von Bootstrap 3 nicht möglich. Hier ist jedoch ein einfaches jQuery-Plugin, das genau das zu tun scheint, was Sie wollen. Http://sorgalla.com/jcarousel/
quelle
Aktualisiert 2019 ...
Bootstrap 4
Das Karussell wurde in 4.x geändert, und die Animationsübergänge mit mehreren Folien können wie folgt überschrieben werden ...
Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0 ( 4 anzeigen , jeweils 1 vorrücken)
Bootstrap 4.1.0 (3 anzeigen , jeweils 1 vorrücken)
Bootstrap 4.1.0 (alle 4 gleichzeitig vorrücken)
Bootstrap 4.3.1 reagiert (mehrere newanzeigen , vorrücken 1)
Bootstrap 4.3.1-Karussell mit Kartennew
Eine weitere Option ist ein ansprechendes Karussell, das nur 1 Folie auf kleineren Bildschirmen anzeigt und vorschiebt , aber zeigt, dass mehrere Folien größere Bildschirme sind . Anstatt die Folien wie im vorherigen Beispiel zu klonen, wird das CSS angepasst und mit jQuery nur die zusätzlichen Folien verschoben, um ein kontinuierliches Radfahren (Wrap Around) zu ermöglichen:
Bitte kopieren Sie diesen Code nicht einfach und fügen Sie ihn ein. Verstehe zuerst, wie es funktioniert.
Bootstrap 4 Responsive (3, 1 Folie auf dem Handy anzeigen)
Beispiel - Bootstrap 4 Responsive (4, 1 Folie auf dem Handy anzeigen )
Beispiel - Bootstrap 4 Responsive (5, 1 Folie auf dem Handy anzeigen)
Bootstrap 3
Hier ist ein 3.x-Beispiel für Bootply: http://bootply.com/89193
Sie müssen eine ganze Reihe von Bildern in das aktive Element einfügen. Hier ist eine andere Version, die die Bilder nicht bei kleineren Bildschirmbreiten stapelt: http://bootply.com/92514
BEARBEITEN Alternativer Ansatz, um jeweils eine Folie voranzutreiben :
Verwenden Sie jQuery, um die nächsten Elemente zu klonen.
Und dann CSS entsprechend positionieren ...
Vor 3.3.1
Nach 3.3.1
Dies zeigt 3 gleichzeitig an, aber es wird jeweils nur eine Folie angezeigt:
Bootstrap 3.x Demo
Bitte kopieren Sie diesen Code nicht und fügen Sie ihn nicht ein. Verstehe zuerst, wie es funktioniert. Diese Antwort soll Ihnen beim Lernen helfen .
Das Verdoppeln dieses modifizierten Bootstrap 4-Karussells funktioniert nur zur Hälfte korrekt (die Bildlaufschleife funktioniert nicht mehr).
Wie werden 2 Bootstrap-Schieberegler auf einer Seite erstellt, ohne dass CSS und JQuery gemischt werden?
Bootstrap 4 Multi Carousel zeigt 4 statt 3 Bilder
quelle
Alle oben genannten Lösungen sind hacky und fehlerhaft. Versuche es nicht einmal. Verwenden Sie andere Bibliotheken. Das Beste, was ich gefunden habe - http://sachinchoolur.github.io/lightslider Funktioniert hervorragend mit Bootstrap, fügt kein Junk-HTML hinzu, ist hoch konfigurierbar, reaktionsschnell, mobilfreundlich usw.
quelle
Dies ist ein funktionierender Twitter-Bootstrap 3.
Hier ist das Javascript :
Und die CSS :
Sie können es in Aktion auf dieser Jsfiddle sehen
Der Grund, warum ich diese Antwort hinzugefügt habe, weil die anderen nicht ganz funktionieren. Ich habe 2 Fehler in ihnen gefunden, einer davon war, dass der linke Pfeil einen seltsamen Effekt erzeugte und der andere war, dass der Text in einigen Situationen fett wurde, was durch Einstellen der Hintergrundfarbe behoben werden kann, sodass das untere Element während des Übergangs nicht sichtbar ist bewirken.
quelle
Das hat bei mir funktioniert. Sehr einfaches jQuery und CSS, um reaktionsschnelle Karussells unabhängig von Karussells auf derselben Seite zu erstellen. Sehr anpassbar, aber im Grunde genommen ein Div mit Leerraum-Nowrap, der eine Reihe von Inline-Block-Elementen enthält, und das letzte am Anfang, um sich zurück zu bewegen, oder das erste an das Ende, um sich vorwärts zu bewegen. Danke
insertAfter
!quelle
Update 2019-03-06 - Bootstrap v4.3.1
Es scheint, dass die neue Bootstrap-Version
margin-right: -100%
jedem Element ein a hinzufügt. In der Antwortlösung, die in der am besten bewerteten Antwort hier angegeben ist , sollte diese Eigenschaft zurückgesetzt werden, z.Ein funktionierender Codepen mit v4.3.1 in LESS .
quelle
Die beliebteste Antwort ist richtig, aber ich denke, der Code ist nutzlos kompliziert. Mit dem gleichen CSS ist dieser Abfragecode meiner Meinung nach leichter zu verstehen:
quelle
versuchen Sie dies ..... es funktioniert in meinem .... Code:
quelle
quelle
Ich hatte das gleiche Problem und die hier beschriebenen Lösungen funktionierten gut. Ich wollte jedoch Änderungen der Fenstergröße (und des Layouts) unterstützen. Das Ergebnis ist eine kleine Bibliothek, die die gesamte Berechnung löst. Überprüfen Sie es hier: https://github.com/SocialbitGmbH/BootstrapCarouselPageMerger
Damit das Skript funktioniert, müssen Sie einen neuen
<div>
Wrapper mit der Klasse.item-content
direkt in Ihre hinzufügen.item
<div>
. Beispiel:Nutzung dieser Bibliothek:
So ändern Sie die Einstellungen:
Beispiel:
Wie Sie sehen können, wird das Karussell aktualisiert, um mehr Steuerelemente anzuzeigen, wenn Sie die Fenstergröße ändern. Überprüfen Sie die
watchWindowSizeTimeout
Einstellung, um das Zeitlimit für die Reaktion auf Änderungen der Fenstergröße zu steuern.quelle
quelle
Ich habe Ihre Fragen und Antworten gesehen und ein neues reaktionsschnelles und flexibles Karussell mit mehreren Elementen erstellt. Sie können es hier sehen:
https://gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066e
quelle
Sie können mehrere li in ol-Tags hinzufügen, die ein Attribut als Klasse mit dem Wert "Karussellindikatoren" und mit Daten-Folie zu sequentiellen Werten wie 0 bis 6 oder 0 bis 9 haben.
dann müssen Sie nur das div kopieren und einfügen, das das Attribut als Klasse mit dem Wert "item" hat.
Das funktioniert bei mir.
quelle
Verweis auf den obigen Link Ich habe 1 neues Ding namens Show 4 hinzugefügt. Folie eins nach dem anderen für Bootstrap 3 (v3.3.7).
CODEPLY : - https://www.codeply.com/go/eWUbGlspqU
LIVE SNIPPET
quelle