我正致力于JSFiddle上提供的项目。您可以注意到,显示了6个项目,我想制作一个旋转木马,每张幻灯片显示3个项目。在研究了这个问题之后,我在Codepen找到了这个很棒的项目。 我项目的每个项目都由以下代码表示:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
&#13;
而Codepen上的项目由此表示:
<div class="item active">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
</div>
</div>
&#13;
每当我尝试删除Codepen中的项目代码并从JSFiddle下载我的项目代码时,滑块就会停止工作。
请让我知道如何解决这个问题。
答案 0 :(得分:1)
这是你想要的吗?请检查小提琴,你会明白,为什么它不起作用。您可能错过了一些库和CSS。
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
&#13;
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
@media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
&#13;
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a>
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a>
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a>
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
阅读carousel documentation并注意每个项目的格式(特别是添加.item
和.active
)。
每个图像周围的这个包装器使每行显示3个元素:
<div class="col-xs-4">
...
</div>
(相比之下,使用.col-xs-12
表示每个显示行有1个图像,.col-xs-6
表示每个显示行有2个图像)