ブートストラップ：複数の画像カルーセルには1つのスライドのみが表示されます

Question

2つのスライダを使用していますが、問題は2番目です。一度に複数の画像を表示し、一度に1つずつスライドさせる必要があります。しかし、この状況では、それはアイテムにのみ表示されます。 私はこのスレッド上のすべての手順に従ってみましたが、それはまだ動作しません： 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>

私はすでに一体を貼り付けられた上記のリンクでサンプルをチェックアウトしてコピーそれはまだ働きません。両方のスライダーで競合が発生しているかどうかはわかりません。ここで

Answer 1

は、ソリューションがあなたのコードである賢明なすべてがすでに私、私はあなたがここに

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>