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>