bootstrap:多图像传送带只显示一张幻灯片
问题描述:
我使用两个滑块,问题在第二个。它应该一次显示多个图像,然后一次滑动一个项目。但在这种情况下,它只显示在项目上。 我试图按照这一主题中的所有步骤,但它仍然不能正常工作: Bootstrap: Slide only one image among the multiple images in an item of the carouselbootstrap:多图像传送带只显示一张幻灯片
$('#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&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&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&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&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&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&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&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&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>
我已经签出了样品上面提供的链接和复制粘贴的挫折感在它之外,它仍然不起作用。我不确定是否在两个滑块上导致冲突。
答
这里是解决你的代码英明正确的,我认为你忘了在这里添加引导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&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&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&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&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&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&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&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&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>
感谢哈里什,我已经有js cdn's,我把它放在