Bootstrap-4 Multi-Carousel zeigt 4 Bilder anstatt 3

Ich kann nicht herausfinden, wie man es zeigen 4 Bilder anstatt 3.

Basierend auf diesem Code: Bootstrap 4 Mehrere Artikel, Karussell

Script JS

$('#recipeCarousel').carousel({
  interval: 10000
})

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

CSS

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
transform: translateX(-25%)
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
transform: translateX(0);
}

und ich habe geändert, um diesen code

<div class="carousel-item col-md-3">

statt dieser original-code

<div class="carousel-item col-md-4">

InformationsquelleAutor edokko | 2018-02-05

  1. 1

    Seit 4 cols, sind 25% der Breite (statt 33%) Veränderung der CSS:

    .carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%)
}

    Auch ein zusätzliches Element muss geklont werden, die in jeder Folie. Also, das JS zu ändern ist:

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

    for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
      }
});

    Bootstrap 4.0.0 Demo - 4 Folien, Voraus 1

    Hinweis: Von alpha-6 (wenn die ursprüngliche Frage gestellt wurde) zu Bootstrap 4.0.0, die aktiv carousel-item " geändert, um flexbox. Also, das gleiche getan werden muss, damit die benachbarten Elemente in der multi-Karussell.

    .carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

    Siehe auch: Bootstrap 4.1.0 (vorher alle 4 auf einmal)

    Ich danke Ihnen sehr! Es funktioniert gut, Aber das Foto zeigt eine vertikale Linie. Ich weiß, wenn Sie sehen, auf Codeply, es wird nicht zeigen, bis wie die.
    Ich habe gerade festgestellt, das original ist mit Bootstrap-4 alpha 6, ich bin mit der Beta 2 .... das ist, warum das Foto zeigt die vertikale. aber wo sollte ich ändern, um Horizont, anstatt vertikal

    InformationsquelleAutor Zim

Schreibe einen Kommentar