Bootstrap 3 carousel mit mehreren Elementen
Implementierte ich eine mehrere Artikel, Karussell mit Bootstrap3 als in dieser demo gezeigten. Es zeigt 4 Elemente zu einem Zeitpunkt.
Wie kann ich das ändern? Ich möchte 5 oder 6 Elementen.
Schau mal hier, die helfen können Sie aswell. stackoverflow.com/questions/22558936/...
aktualisiert meine Antwort auf fix animation bug...bitte akzeptieren, wenn es löst das Problem für Sie.
aktualisiert meine Antwort auf fix animation bug...bitte akzeptieren, wenn es löst das Problem für Sie.
InformationsquelleAutor akiaWT | 2014-08-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mehrere änderungen nötig sind:
In JS ändern
i<2
zui<3
(zeigt 5 über) oderi<4
(angezeigt wird 6 über)In HTML ändern Sie Ihre
<div class="col-md-6 col-md-offset-3">
zu etwas, das Platz für mehr Zellen, zum Beispiel<div class="col-md-10 col-md-offset-1">
. (Dies ist optional, aber 6 in einer col-md-6 sieht ziemlich eng in meiner Meinung nach)Ändern
col-md-3
zucol-md-2
. Beachten Sie, dass sich das ändern wird das Karussell nur auf mittleren und großen Auflösung der Bildschirme. Zum anpassen der Breite aufsm
undxs
Sie würden anpassen müssen, um diecol
Größen fürcol-sm
undcol-xs
Dann in der CSS ändern, um accodomate für 6 in der animation durch änderung 25% (
100%/4
) auf 16,7% (100%/6
). Wenn Sie wollen 5 über Sie ändern würde, um 20%.Aktualisiert Bootply mit 6 über
Sicher, es gibt eine Möglichkeit, aber das ist eine separate Frage/Problem. Man könnte ein
foreach
Schleife zum generieren des html-Codes und dann dynamisch generieren der CSS mit jQuery-basierend auf der Anzahl von Elementen auf der Seite. Es ist nicht eine einfache Sache, aber es ist überschaubar, wenn nötig.Ich bin mit dieser mehrere Artikel slider und eine normale(1 Eintrag) regler innerhalb einer einzigen Seite. Aber weil die Medien-Abfrage, die Sie bereits erwähnt, ist der normale regler nicht richtig funktioniert.Was darüber??
Bisschen spät, aber nur eine Antwort auf die Letzte Bemerkung/Frage für die Zukunft auf. Fügen Sie einfach eine eindeutige id (id="my-unique-Karussell-id") um das Karussell, das enthält mehrere Elemente, und verweisen Sie diese in Ihrem media queries/CSS. Also statt ".carousel-inner .aktiv.Links { left: -16.7%; }" würde er sagen, "#my-unique-Karussell-id .carousel-inner .aktiv.Links { left: -16.7%; }"
InformationsquelleAutor Dan
Einfach durch ändern der Begrenzung auf die für call
Nun hat sechs.
Natürlich werden Sie wollen, halten Sie die Spalten in order by changing
col-md-3
zucol-md-2
InformationsquelleAutor Theodore Enderby