Bootstrap: Mehrere Bildkarussell zeigt nur eine Folie

Question

Ich verwende zwei Schieberegler, das Problem ist auf der zweiten. Es sollte mehrere Bilder gleichzeitig anzeigen und dann jeweils ein Element verschieben. Aber in dieser Situation wird es nur auf Artikel angezeigt. Ich habe versucht, alle Schritte auf diesen Thread zu folgen, aber es immer noch nicht funktioniert: Bootstrap: Slide only one image among the multiple images in an item of the carousel

$('#myCarousel').carousel({ 
 
     interval: 4000 
 
    }) 
 
    
 
    $('.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) { 
 
    \t   next = $(this).siblings(':first'); 
 
    \t  } 
 
    
 
     next.children(':first-child').clone().appendTo($(this)); 
 
     } 
 
    });

.carousel-inner .active.left { left: -25%; } 
 
    .carousel-inner .active.right{ left: 25%; } 
 
    .carousel-inner .next  { left: 25%; } 
 
    .carousel-inner .prev \t \t { left: -25%; } 
 
    .carousel-control \t \t \t { width: 4%; } 
 
    .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid"> 
 
\t \t <div class="col-sm-12 margin-top-20"> 
 
\t \t \t <div id="largeCarousel" class="carousel slide" data-ride="carousel"> 
 
\t \t \t \t <ol class="carousel-indicators"> 
 
\t \t \t \t \t <li data-target="#largeCarousel" data-slide-to="0" class="active"></li> 
 
\t \t \t \t \t <li data-target="#largeCarousel" data-slide-to="1"></li> 
 
\t \t \t \t \t <li data-target="#largeCarousel" data-slide-to="2"></li> 
 
\t \t \t \t </ol> 
 
\t \t \t \t <div class="carousel-inner custom_carousel_holder"> 
 
\t \t \t \t \t <div class="item active"> 
 
\t \t \t \t \t \t <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/> 
 
\t \t \t \t \t \t <div class="carousel-caption"> 
 
\t \t \t \t \t \t \t <h3>Los Angeles</h3> 
 
\t \t \t \t \t \t \t <p>LA is always so much fun!</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/> 
 
\t \t \t \t \t \t <div class="carousel-caption"> 
 
\t \t \t \t \t \t \t <h3>Chicago</h3> 
 
\t \t \t \t \t \t \t <p>Thank you, Chicago!</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 

 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/> 
 
\t \t \t \t \t \t <div class="carousel-caption"> 
 
\t \t \t \t \t \t \t <h3>New York</h3> 
 
\t \t \t \t \t \t \t <p>We love the Big Apple!</p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a class="left carousel-control" href="#largeCarousel" data-slide="prev"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-chevron-left"></span> 
 
\t \t \t \t \t <span class="sr-only">Previous</span> 
 
\t \t \t \t </a> 
 
\t \t \t \t <a class="right carousel-control" href="#largeCarousel" data-slide="next"> 
 
\t \t \t \t \t <span class="glyphicon glyphicon-chevron-right"></span> 
 
\t \t \t \t \t <span class="sr-only">Next</span> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="col-sm-12 text-center margin-top-20"> 
 
\t \t \t <h3>Discover Our Brands</h3> 
 
\t \t </div> 
 

 
\t \t <div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div> 
 
\t \t <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t <div class="carousel slide" id="myCarousel"> 
 
\t \t \t \t <div class="carousel-inner"> 
 
\t \t \t \t \t <div class="item active"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="item"> 
 
\t \t \t \t \t \t <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
 
\t \t \t \t <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

ich bereits die Proben oben auf der mitgelieferten Link ausgecheckt und kopieren das Heck geklebt raus und es funktioniert immer noch nicht. Ich bin nicht wirklich sicher, ob ich einen Konflikt auf beiden Slidern verursache.

Answer 1

Hier ist die Lösung Code weise alle richtig Ich glaube, Sie vergessen Bootstrap js Datei hier die Arbeits Geige mit CDN

https://jsfiddle.net/hahkarthick/7n8aux8k/

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

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

.carousel-inner .active.left { left: -25%; } 
 
.carousel-inner .active.right{ left: 25%; } 
 
.carousel-inner .next  { left: 25%; } 
 
.carousel-inner .prev  { left: -25%; } 
 
.carousel-control   { width: 4%; } 
 
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <div class="container-fluid"> 
 
    <div class="col-sm-12 margin-top-20"> 
 
     <div id="largeCarousel" class="carousel slide" data-ride="carousel"> 
 
      <ol class="carousel-indicators"> 
 
       <li data-target="#largeCarousel" data-slide-to="0" class="active"></li> 
 
       <li data-target="#largeCarousel" data-slide-to="1"></li> 
 
       <li data-target="#largeCarousel" data-slide-to="2"></li> 
 
      </ol> 
 
      <div class="carousel-inner custom_carousel_holder"> 
 
       <div class="item active"> 
 
        <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/> 
 
        <div class="carousel-caption"> 
 
         <h3>Los Angeles</h3> 
 
         <p>LA is always so much fun!</p> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/> 
 
        <div class="carousel-caption"> 
 
         <h3>Chicago</h3> 
 
         <p>Thank you, Chicago!</p> 
 
        </div> 
 
       </div> 
 

 
       <div class="item"> 
 
        <img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie"/> 
 
        <div class="carousel-caption"> 
 
         <h3>New York</h3> 
 
         <p>We love the Big Apple!</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <a class="left carousel-control" href="#largeCarousel" data-slide="prev"> 
 
       <span class="glyphicon glyphicon-chevron-left"></span> 
 
       <span class="sr-only">Previous</span> 
 
      </a> 
 
      <a class="right carousel-control" href="#largeCarousel" data-slide="next"> 
 
       <span class="glyphicon glyphicon-chevron-right"></span> 
 
       <span class="sr-only">Next</span> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-12 text-center margin-top-20"> 
 
     <h3>Discover Our Brands</h3> 
 
    </div> 
 

 
    <div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
     <div class="carousel slide" id="myCarousel"> 
 
      <div class="carousel-inner"> 
 
       <div class="item active"> 
 
        <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="col-xs-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-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div> 
 
       </div> 
 
      </div> 
 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
 
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
 
     </div> 
 
    </div>