web-dev-qa-db-fra.com

Bootstrap 4 carrousel d'objets multiples (plusieurs articles de carrousel affichés à la fois)

Comment implémenter un carrousel à plusieurs éléments dans Bootstrap 4? La documentation mentionne plusieurs carrousels, mais pas un carrousel à plusieurs éléments.

csshtml5bootstrap-4twitter-bootstrap-4
11
SemanticUI

Vous pouvez afficher un élément du carrousel à la fois, mais le remplir avec plusieurs éléments. Quelque chose comme:

.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

Mais vous pouvez alors souhaiter pouvoir les avancer un à un. Cela ne va pas arriver avec bootstrap tout de suite. Après avoir implémenté de nombreux carrousels, je vous conseillerais de chercher une autre bibliothèque de carrousel lorsque Bootstrap ne convient pas. Slick.js est ma librairie de prédilection pour de nombreuses options de configuration de carrousel. Et c'est un assez mince ~ 5k min'd et gzippé. 

Si vous êtes déterminé à utiliser bootstrap, voici un script pouvant fournir une avance unique et plusieurs éléments: http://codepen.io/MarkitDigital/pen/ZpEByz

13
Eric N

2018 Mise à jour pour Bootstrap 4

J'ai fait cela en utilisant la grille Bootstrap 4 avec des colonnes séparées pour chaque élément du carrousel. Si vous souhaitez faire avancer un seul élément à la fois, le script peut ressembler à ceci et dupliquer les diapositives dans chaque élément du carrousel.

(function($) {
    "use strict";

    $('.carousel .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));
      }
    });

})(jQuery);

Plusieurs éléments:
http://codeply.com/go/WEbiqQvGhy

Plusieurs éléments, déplacez-vous un à la fois:
http://codeply.com/go/FrzoIEKCdH (Bootstrap 4 alpha)
http://codeply.com/go/3EQkUOhhZz (Bootstrap 4.0.0)

Responsive 3 éléments sur grand (1 à la fois), 1 élément sur plus petit:
http://codeply.com/go/s3I9ivCBYH

Voir aussi: https://stackoverflow.com/a/20008623/171456

11
Zim

je travaille sur bootstrap 4. Ce code fonctionne pour moi

<div class="container">
            <div class="row">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>    
        </div>

Ce carrousel multiple de six images glisse chaque fois en bloc. Libre de me demander :)

0
Mohamed Abbas