bootstrap：多圖像傳送帶只顯示一張幻燈片

Question

我使用兩個滑塊，問題在第二個。它應該一次顯示多個圖像，然後一次滑動一個項目。但在這種情況下，它只顯示在項目上。 我試圖按照這一主題中的所有步驟，但它仍然不能正常工作： 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

這裏是解決你的代碼英明正確的，我認爲你忘了在這裏添加引導js文件工作撥弄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>