Bootstrap carousel plusieurs images à la fois

C’est l’effet que j’essaie d’obtenir avec le carrousel Bootstrap 3

entrer la description de l'image ici

Au lieu de simplement afficher une image à la fois, elle affiche N images glissées côte à côte. Ensuite, lorsque vous glissez (ou quand il glisse automatiquement), cela déplace le groupe de diapositives comme il le fait.

Est-ce que cela peut être fait avec le carrousel du bootstrap 3? J’espère que je n’aurai pas à aller chercher un autre plugin jQuery …

Est-ce que cela peut être fait avec le carrousel du bootstrap 3? J’espère que je n’aurai pas à aller chercher un autre plugin jQuery

En 2013-12-08 la réponse est non. L’effet que vous recherchez n’est pas possible en utilisant le plug-in de carrousel générique de Bootstrap 3. Cependant, voici un simple plugin jQuery qui semble faire exactement ce que vous voulez http://sorgalla.com/jcarousel/

Mise à jour 2018

Bootstrap 4

Le carrousel a changé dans 4.x et les transitions d’animation multi-diapositives peuvent être remplacées comme ceci …

.carousel-inner .carousel-item-right.active, .carousel-inner .carousel-item-next { transform: translateX(33.33%); } .carousel-inner .carousel-item-left.active, .carousel-inner .carousel-item-prev { transform: translateX(-33.33%) } .carousel-inner .carousel-item-right, .carousel-inner .carousel-item-left{ transform: translateX(0); } 

Démo Bootstrap 4 Alpha.6
Bootstrap 4.0.0 (affiche 4, avance de 1 à la fois)
Bootstrap 4.1.0 (avance tous les 4 à la fois)


Une autre option est un carrousel réactif qui ne montre et avance que 1 diapositive sur des écrans plus petits. Au lieu de cloner les diapositives comme dans l’exemple précédent, celui-ci ajuste le CSS et utilise jQuery uniquement pour déplacer les diapositives supplémentaires afin de permettre un cycle continu:

Ne vous contentez pas de copier et coller ce code. Tout d’abord, comprenez comment cela fonctionne.

Bootstrap 4 Responsive (affichez 3, 1 diapositive sur mobile)

 @media (min-width: 768px) { /* show 3 items */ .carousel-inner .active, .carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item { display: block; } .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { transition: none; } .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev { position: relative; transform: translate3d(0, 0, 0); } .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { position: absolute; top: 0; right: -33.3333%; z-index: -1; display: block; visibility: visible; } /* left or forward direction */ .active.carousel-item-left + .carousel-item-next.carousel-item-left, .carousel-item-next.carousel-item-left + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(-100%, 0, 0); visibility: visible; } /* farthest right hidden item must be abso position for animations */ .carousel-inner .carousel-item-prev.carousel-item-right { position: absolute; top: 0; left: 0; z-index: -1; display: block; visibility: visible; } /* right or prev direction */ .active.carousel-item-right + .carousel-item-prev.carousel-item-right, .carousel-item-prev.carousel-item-right + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { position: relative; transform: translate3d(100%, 0, 0); visibility: visible; display: block; visibility: visible; } }  

Exemple – Bootstrap 4 Responsive (affichez 4, 1 diapositive sur mobile)


Bootstrap 3

Voici un exemple 3.x sur Bootply: http://bootply.com/89193

Vous devez placer une rangée entière d’images dans l’élément actif. Voici une autre version qui n’emstack pas les images à des largeurs d’écran plus petites: http://bootply.com/92514

EDIT Approche alternative pour faire avancer une diapositive à la fois :

Utilisez jQuery pour cloner les éléments suivants.

 $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } }); 

Et puis CSS pour se positionner en conséquence …

Avant 3.3.1

 .carousel-inner .active.left { left: -33%; } .carousel-inner .next { left: 33%; } 

Après 3.3.1

 .carousel-inner .item.left.active { transform: translateX(-33%); } .carousel-inner .item.right.active { transform: translateX(33%); } .carousel-inner .item.next { transform: translateX(33%) } .carousel-inner .item.prev { transform: translateX(-33%) } .carousel-inner .item.right, .carousel-inner .item.left { transform: translateX(0); } 

Cela montrera 3 à l’heure, mais ne glisse qu’un à la fois:

Démo Bootstrap 3.x


Veuillez ne pas copier-coller ce code. Tout d’abord, comprenez comment cela fonctionne. Cette réponse est là pour vous aider à apprendre .

Doubler ce bootstrap 4 modifié ne fonctionne que de moitié correctement (la boucle de défilement ne fonctionne plus)
Comment faire 2 curseurs bootstrap en une seule page sans mélanger leurs css et jquery?

Ceci est un bootstrap de travail 3.

Voici le javascript :

 $('#myCarousel').carousel({ interval: 10000 }) $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } }); 

Et le css :

 .carousel-inner .active.left { left: -33%; } .carousel-inner .active.right { left: 33%; } .carousel-inner .next { left: 33% } .carousel-inner .prev { left: -33% } .carousel-control.left { background-image: none; } .carousel-control.right { background-image: none; } .carousel-inner .item { background: white; } 

Vous pouvez le voir en action à ce Jsfiddle

La raison pour laquelle j’ai ajouté cette réponse parce que les autres ne fonctionnent pas entièrement. J’ai trouvé 2 bugs à l’intérieur, l’un d’eux était que la flèche gauche produisait un effet étrange et l’autre concernait le texte qui devenait audacieux dans certaines situations, ce qui pouvait être résolu en définissant la couleur d’arrière-plan. effet.

Toutes les solutions ci-dessus sont piratées et buggées. Ne même pas essayer. Utilisez d’autres libs. Le meilleur que j’ai trouvé – http://sachinchoolur.github.io/lightslider Fonctionne très bien avec bootstrap, n’ajoute pas de fichiers joker html, hautement configurable, réactif, compatible avec les mobiles, etc.

 $('.multi-item-carousel').lightSlider({ item: 4, pager: false, autoWidth: false, slideMargin: 0 });