it-swarm.com.de

Bootstrap-Karussell mehrere Frames gleichzeitig

Dies ist der Effekt, den ich mit Bootstrap 3-Karussell erreichen möchte

enter image description here

Anstatt nur ein Bild gleichzeitig anzuzeigen, werden N Bilder nebeneinander angezeigt. Wenn Sie dann schieben (oder wenn es automatisch gleitet), verschiebt es die Gruppe von Folien so, wie es ist.

Kann das gemacht werden mit dem Bootstrap 3-Karussell? Ich hoffe, dass ich nicht noch ein jQuery-Plugin suchen muss ...

86

Ist dies mit dem Karussell von Bootstrap 3 möglich? Ich hoffe, dass ich keine habe. um nach einem weiteren jQuery-Plugin zu suchen

Ab dem 08.12.2013 lautet die Antwort nein. Der von Ihnen 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 soll, was Sie wollen http://sorgalla.com/jcarousel/

16
Ronald

Update 2018

Bootstrap 4

Das Karussell hat sich in 4.x geändert, und die Übergänge der Animationen mit mehreren Folien können wie folgt überschrieben werden ...

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

Bootstrap 4 Alpha.6 Demo
Bootstrap 4.0.0 (4 anzeigen, jeweils um 1 vorrücken)
Bootstrap 4.1.0 (3 anzeigen, jeweils um 1 vorrücken)
Bootstrap 4.1.0 (alle 4 gleichzeitig vorrücken)


Eine weitere Option ist ein responsive -Karussell, das nur 1 Folie auf kleineren Bildschirmen anzeigt und weiterführt. Anstatt die Folien wie im vorherigen Beispiel zu klonen, wird hier die CSS-Einstellung angepasst und nur die jQuery-Funktion wird verwendet, um die zusätzlichen Folien zu verschieben, um kontinuierliches Durchlaufen (Umlaufen) zu ermöglichen:

Diesen Code nicht einfach kopieren und einfügen. Verstehe zuerst, wie es funktioniert.

Bootstrap 4 Responsive (3, 1 Folie auf dem Handy anzeigen)

@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;
    }

}

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-md-4 active">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
            </div>
            <div class="carousel-item col-md-4">
                <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-muted"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Beispiel - Bootstrap 4 Responsive (4, 1 Folie auf dem Handy anzeigen)


Bootstrap 3

Hier ein 3.x-Beispiel zu Bootply: http://bootply.com/89193

Sie müssen eine ganze Reihe von Bildern in dem Element aktivieren. Hier ist eine weitere Version, die die Bilder nicht bei kleineren Bildschirmbreiten stapelt: http://bootply.com/92514

EDIT Alternative Annäherung an eine Folie vorwärts bewegen:

Verwenden Sie jQuery, um die nächsten Elemente zu klonen.

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

Und dann CSS entsprechend positionieren ...

Vor 3.3.1

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

Nach 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);
}

Dies wird show 3 zu einem Zeitpunkt zeigen, aber nur jeweils eine verschieben:

Bootstrap 3.x Demo


Bitte kopieren Sie diesen Code nicht und fügen Sie ihn ein. Verstehe zuerst, wie es funktioniert. Diese Antwort ist hier zu Hilfe beim Lernen.

Das Verdoppeln dieses modifizierten Bootstrap 4-Karussells funktioniert nur zur Hälfte korrekt (Scroll-Loop funktioniert nicht mehr)
Wie kann man 2 Bootstrap-Schieberegler auf einer Seite erstellen, ohne css und jquery zu mischen?
Bootstrap 4 Multi Carousel 4 statt 3 Bilder anzeigen

104
Zim

Alle oben genannten Lösungen sind gehackt und fehlerhaft. Versuchen Sie es nicht einmal. Verwenden Sie andere Bibliotheken. Das Beste, was ich gefunden habe - http://sachinchoolur.github.io/lightslider Funktioniert hervorragend mit Bootstrap, fügt keine Junk-HTML hinzu, hochkonfigurierbar, ansprechend, mobil-freundlich usw.

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

This ist ein funktionierender Twitter-Bootstrap 3.

Hier ist das 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));
    }
});

Und das 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;      }

Sie können es in Aktion an diesem Jsfiddle sehen.

Der Grund, warum ich diese Antwort hinzugefügt habe, weil die anderen nicht ganz funktionieren. Ich habe zwei Fehler gefunden, einer davon war, dass der linke Pfeil einen seltsamen Effekt auslöste und der andere über den Text war, der in manchen Situationen mutig wurde und durch das Festlegen der Hintergrundfarbe behoben werden konnte, sodass das untere Element während des Übergangs nicht sichtbar ist bewirken.

19
paulalexandru

Das hat bei mir funktioniert. Mit jQuery und CSS lassen sich responsive Karussells unabhängig von Karussells auf derselben Seite erstellen. In hohem Maße anpassbar, aber im Grunde ein Div mit einer Leerraum-Nowrap, die eine Reihe von Inline-Block-Elementen enthält, und den letzten an den Anfang setzen, um sich zurückzubewegen, oder den ersten an den Anfang, um sich vorwärts zu bewegen. Danke, insertAfter!

$('.carosel-control-right').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
});
$('.carosel-control-left').click(function() {
  $(this).blur();
  $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
});
@media (max-width: 300px) {
  .carosel-item {
    width: 100%;
  }
}
@media (min-width: 300px) {
  .carosel-item {
    width: 50%;
  }
}
@media (min-width: 500px) {
  .carosel-item {
    width: 33.333%;
  }
}
@media (min-width: 768px) {
  .carosel-item {
    width: 25%;
  }
}
.carosel {
  position: relative;
  background-color: #000;
}
.carosel-inner {
  white-space: nowrap;
  overflow: hidden;
  font-size: 0;
}
.carosel-item {
  display: inline-block;
}
.carosel-control {
  position: absolute;
  top: 50%;
  padding: 15px;
  box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.5);
  transform: translateY(-50%);
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  display: inline-block;
}
.carosel-control-left {
  left: 15px;
}
.carosel-control-right {
  right: 15px;
}
.carosel-control:active,
.carosel-control:hover {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carosel" id="carosel1">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>
<div class="carosel" id="carosel2">
  <a class="carosel-control carosel-control-left glyphicon glyphicon-chevron-left" href="#"></a>
  <div class="carosel-inner">
    <img class="carosel-item" src="http://placehold.it/500/bbbbbb/fff&amp;text=1" />
    <img class="carosel-item" src="http://placehold.it/500/CCCCCC&amp;text=2" />
    <img class="carosel-item" src="http://placehold.it/500/eeeeee&amp;text=3" />
    <img class="carosel-item" src="http://placehold.it/500/f4f4f4&amp;text=4" />
    <img class="carosel-item" src="http://placehold.it/500/fcfcfc/333&amp;text=5" />
    <img class="carosel-item" src="http://placehold.it/500/f477f4/fff&amp;text=6" />
  </div>
  <a class="carosel-control carosel-control-right glyphicon glyphicon-chevron-right" href="#"></a>
</div>

5
Tiny Giant

Die populärste Antwort ist richtig, aber ich denke, der Code ist unnötig kompliziert. Mit demselben CSS ist dieser Jquery-Code einfacher zu verstehen, glaube ich:

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

$('.carousel .item').each(function() {
  var item = $(this);
  item.siblings().each(function(index) {
    if (index < 4) {
      $(this).children(':first-child').clone().appendTo(item);
    }
  });
});
3
Luke Skywalker

    $('#carousel-example-generic').on('slid.bs.carousel', function () {
        $(".item.active:nth-child(" + ($(".carousel-inner .item").length -1) + ") + .item").insertBefore($(".item:first-child"));
        $(".item.active:last-child").insertBefore($(".item:first-child"));
    });    
        .item.active,
        .item.active + .item,
        .item.active + .item  + .item {
           width: 33.3%;
           display: block;
           float:left;
        }          
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="max-width:800px;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <img data-src="holder.js/300x200?text=1">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=2">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=3">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=4">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=5">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=6">
    </div>
    <div class="item">
        <img data-src="holder.js/300x200?text=7">
    </div>    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.1/holder.min.js"></script>
    

2
Bass Jobsen

probiere dies ..... es funktioniert in meinem .... code:

<div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
            <div class="item">
                 <div class="span4" style="padding-left: 18px;">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                    <img src="http://placehold.it/290x180" class="img-thumbnail">
                </div>
            </div>
        </div>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
2

Update 2019-03-06 - Bootstrap v4.3.1

Es scheint, dass die neue Bootstrap-Version jedem Element einen margin-right: -100% hinzufügt. Daher sollte in der Antwortlösung, die in der hier am besten bewerteten Antwort angegeben ist, diese Eigenschaft zurückgesetzt werden, z.

.carousel-inner .carousel-item {
    margin-right: inherit;
}

Ein funktionierender Codepen mit v4.3.1 in LESS .

1
CPHPython

Verweis Zum obigen Link habe ich 1 neues Objekt namens show 4 zur Zeit hinzugefügt. Schieben Sie eine nach der anderen für Bootstrap 3 (v3.3.7).

CODEPLY: - https://www.codeply.com/go/eWUbGlspqU

LIVE SNIPPET

(function(){
  $('#carousel123').carousel({ interval: 2000 });
}());

(function(){
  $('.carousel-showmanymoveone .item').each(function(){
    var itemToClone = $(this);

    for (var i=1;i<4;i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-"+(i))
        .appendTo($(this));
    }
  });
}());
body {
    margin-top: 50px;
}

.carousel-showmanymoveone .carousel-control {
  width: 4%;
  background-image: none;
}
.carousel-showmanymoveone .carousel-control.left {
  margin-left: 15px;
}
.carousel-showmanymoveone .carousel-control.right {
  margin-right: 15px;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
  display: none;
}
@media all and (min-width: 768px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -50%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 50%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-1 {
    display: block;
  }
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
            transform: translate3d(50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
            transform: translate3d(-50%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
@media all and (min-width: 992px) {
  .carousel-showmanymoveone .carousel-inner > .active.left,
  .carousel-showmanymoveone .carousel-inner > .prev {
    left: -25%;
  }
  .carousel-showmanymoveone .carousel-inner > .active.right,
  .carousel-showmanymoveone .carousel-inner > .next {
    left: 25%;
  }
  .carousel-showmanymoveone .carousel-inner > .left,
  .carousel-showmanymoveone .carousel-inner > .prev.right,
  .carousel-showmanymoveone .carousel-inner > .active {
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner .cloneditem-2,
  .carousel-showmanymoveone .carousel-inner .cloneditem-3 {
    display: block;
  }
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-showmanymoveone .carousel-inner > .item.active.right,
  .carousel-showmanymoveone .carousel-inner > .item.next {
    -webkit-transform: translate3d(25%, 0, 0);
            transform: translate3d(25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.active.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-25%, 0, 0);
            transform: translate3d(-25%, 0, 0);
    left: 0;
  }
  .carousel-showmanymoveone .carousel-inner > .item.left,
  .carousel-showmanymoveone .carousel-inner > .item.prev.right,
  .carousel-showmanymoveone .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    left: 0;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="carousel carousel-showmanymoveone slide" id="carousel123">
	<div class="carousel-inner">
		<div class="item active">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive"></a></div>
		</div>          
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div>
		</div>
		<div class="item">
			<div class="col-xs-12 col-sm-6 col-md-3"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive"></a></div>
		</div>
	</div>
	<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
	<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

0
Nisharg Shah

<!--css code--> 
    .carousel-showsixmoveone .carousel-control {
          width: 4%;
          background-image: none;
        }
        .carousel-showsixmoveone .carousel-control.left {
          margin-left: 15px;
        }
        .carousel-showsixmoveone .carousel-control.right {
          margin-right: 15px;
        }
        .carousel-showsixmoveone .cloneditem-1,
        .carousel-showsixmoveone .cloneditem-2,
        .carousel-showsixmoveone .cloneditem-3,
        .carousel-showsixmoveone .cloneditem-4,
        .carousel-showsixmoveone .cloneditem-5 {
          display: none;
        }
        @media all and (min-width: 768px) {
          .carousel-showsixmoveone .carousel-inner > .active.left,
          .carousel-showsixmoveone .carousel-inner > .prev {
            left: -33.333%;
          }
          .carousel-showsixmoveone .carousel-inner > .active.right,
          .carousel-showsixmoveone .carousel-inner > .next {
            left: 33.333%;
          }
          .carousel-showsixmoveone .carousel-inner > .left,
          .carousel-showsixmoveone .carousel-inner > .prev.right,
          .carousel-showsixmoveone .carousel-inner > .active {
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner .cloneditem-1,
          .carousel-showsixmoveone .carousel-inner .cloneditem-2 {
            display: block;
          }
        }
        @media all and (min-width: 768px) and (transform-3d),
        all and (min-width: 768px) and (-webkit-transform-3d) {
          .carousel-showsixmoveone .carousel-inner > .item.active.right,
          .carousel-showsixmoveone .carousel-inner > .item.next {
            -webkit-transform: translate3d(33.333%, 0, 0);
            transform: translate3d(33.333%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.active.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev {
            -webkit-transform: translate3d(-33.333%, 0, 0);
            transform: translate3d(-33.333%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev.right,
          .carousel-showsixmoveone .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
          }
        }
        @media all and (min-width: 992px) {
          .carousel-showsixmoveone .carousel-inner > .active.left,
          .carousel-showsixmoveone .carousel-inner > .prev {
            left: -16.666%;
          }
          .carousel-showsixmoveone .carousel-inner > .active.right,
          .carousel-showsixmoveone .carousel-inner > .next {
            left: 16.666%;
          }
          .carousel-showsixmoveone .carousel-inner > .left,
          .carousel-showsixmoveone .carousel-inner > .prev.right,
          .carousel-showsixmoveone .carousel-inner > .active {
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner .cloneditem-3,
          .carousel-showsixmoveone .carousel-inner .cloneditem-4,
          .carousel-showsixmoveone .carousel-inner .cloneditem-5 {
            display: block;
          }
        }
        @media all and (min-width: 992px) and (transform-3d),
        all and (min-width: 992px) and (-webkit-transform-3d) {
          .carousel-showsixmoveone .carousel-inner > .item.active.right,
          .carousel-showsixmoveone .carousel-inner > .item.next {
            -webkit-transform: translate3d(16.666%, 0, 0);
            transform: translate3d(16.666%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.active.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev {
            -webkit-transform: translate3d(-16.666%, 0, 0);
            transform: translate3d(-16.666%, 0, 0);
            left: 0;
          }
          .carousel-showsixmoveone .carousel-inner > .item.left,
          .carousel-showsixmoveone .carousel-inner > .item.prev.right,
          .carousel-showsixmoveone .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
          }
        }

<!-- begin snippet: js hide: false console: true -->
<!--html-->
<div class="row ">
  <div class="col-md-12">
    <div class="carousel carousel-showsixmoveone slide" id="chocolatelist" data-interval="30000">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=6" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-2">
            <a href="#">
              <img src="http://placehold.it/500/40a1ff/002040&amp;text=8" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-1">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=1" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-2">
            <a href="#">
              <img src="http://placehold.it/500/002d5a/fff/&amp;text=2" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-3">
            <a href="#">
              <img src="http://placehold.it/500/d6d6d6/333&amp;text=3" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-4">
            <a href="#">
              <img src="http://placehold.it/500/002040/eeeeee&amp;text=4" class="img-responsive">
            </a>
          </div>
          <div class="col-xs-12 col-sm-4 col-md-2 cloneditem-5">
            <a href="#">
              <img src="http://placehold.it/500/0054A6/fff/&amp;text=5" class="img-responsive">
            </a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#chocolatelist" data-slide="prev"><i class="glyphicon glyphicon-chevron-left "></i></a>
      <a class="right carousel-control" href="#chocolatelist" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

fügen Sie diesen Code ein, um einen Hinweis zu erhalten. Bildlink der Karussellfolie

0
Ganesh Sundaram

Ich hatte das gleiche Problem und die hier beschriebenen Lösungen funktionierten gut. Ich wollte aber die Änderungen der Fenstergröße (und des Layouts) unterstützen. Das Ergebnis ist eine kleine Bibliothek, die alle Berechnungen 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 Ihren .item<div> einfügen. Beispiel:

<div class="carousel slide multiple" id="very-cool-carousel" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="item-content">
                First page
            </div>
        </div>
        <div class="item active">
            <div class="item-content">
                Second page
            </div>
        </div>
    </div>
</div>

Verwendung dieser Bibliothek:

socialbitBootstrapCarouselPageMerger.run('div.carousel');

So ändern Sie die Einstellungen:

socialbitBootstrapCarouselPageMerger.settings.spaceCalculationFactor = 0.82;

Beispiel:

Wie Sie sehen, wird das Karussell aktualisiert, um mehr Steuerelemente anzuzeigen, wenn Sie die Größe des Fensters ändern. Überprüfen Sie die Einstellung watchWindowSizeTimeout, um das Zeitlimit für die Reaktion auf Änderungen der Fenstergröße zu steuern.

0
Thomas Kekeisen

Ich habe Ihre Fragen und Antworten gesehen und ein neues responsives und flexibles Multi-Artikel-Karussell Gist entwickelt. Sie können es hier sehen:

https://Gist.github.com/IVIR3zaM/d143a361e61459146ae7c68ce86b066d

0
IVIR3zaM
Try this code


 <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">

            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend1.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend2.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="product-image-wrapper">
                    <div class="single-products">
                        <div class="productinfo text-center">
                            <img src="img/home/recommend3.jpg" alt="" />
                            <h2>$56</h2>
                            <p>
                                Easy Polo Black Edition
                            </p>
                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a>
    <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a>
</div>
0
SUNIL KUMAR E.U