Jquery 引导转盘多列幻灯片一次1张
目标：在一个Jquery 引导转盘多列幻灯片一次1张,jquery,css,twitter-bootstrap,carousel,Jquery,Css,Twitter Bootstrap,Carousel,目标：在一个引导旋转木马中有多个列（6），该旋转木马一次滑动一列，并在圆圈中旋转 HTML: <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="my
引导旋转木马中有多个列（6）
，该旋转木马一次滑动一列，并在圆圈中旋转
HTML:
<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-2">
<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-2">
<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-2">
<a href="#"><img src="http://placehold.it/500/eeeeee&text=3" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<a href="#"><img src="http://placehold.it/500/f4f4f4&text=4" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<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-2">
<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-2">
<a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a>
</div>
</div>
<div class="item">
<div class="col-xs-2">
<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>
$('#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 < 4; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
我已经在这上面设置好了（这是明目张胆的复制品，确实有用！）
我的问题是它一次滚动所有6列，但是在下一个循环中，它在开始时是正确的幻灯片
我看不出我在做什么不同的事情，并且已经盯着它看了很久了
欢迎任何意见。。。。。求你了 在bootstrapCSS
版本之间处理carousal的方式似乎有所不同，您使用的是bootstrap v3.3.5，而bootply上的示例使用的是bootstrap v3.0.2
我真的无法弄清楚这两个文件之间的确切区别，但这是工作原理。我已经解决了这个问题。如果没有KAD的回答，我不会得到它，但更改版本号对我来说真的不是一个选择
我使用更少的文件，并通过bower引入了bootstrap，它将所有单独的组件引入到不同的文件中，然后使用@import将它们全部添加到一个“bootstrap.less”文件中
我找到了carousel.less文件，找到了.carousel内部类，并将整个块复制到我自己的.less文件中，以便覆盖组件
这是我新修改的课程，百分比是16.6%，之前都是100%
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
&:extend(.img-responsive);
line-height: 1;
}
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
.transition-transform(~'0.6s ease-in-out');
.backface-visibility(~'hidden');
.perspective(1000px);
&.next,
&.active.right {
.translate3d(16.6%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
.translate3d(-16.6%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
.translate3d(0, 0, 0);
left: 0;
}
}
}
.active,
.next,
.prev {
display: block;
}
.active {
left: 0;
}
.next,
.prev {
position: absolute;
top: 0;
width: 100%;
}
.next {
left: 16.6%;
}
.prev {
left: -16.6%;
}
.next.left,
.prev.right {
left: 0;
}
.active.left {
left: -16.6%;
}
.active.right {
left: 16.6%;
}
}
我认为真正做到这一点的是在transform-3d部分，一旦我改变了它，它就可以按预期工作
当然，这现在只适用于具有6列的旋转木马，这对我来说是正确的。所以为了确保这个样式只应用于这个特定的旋转木马，我将整个东西包装在滑块的id中，所以它只会影响这个
希望这对其他人也有帮助。谢谢@KAD，那么您是否将外部资源更改为较旧的版本？是的，与bootplyOK的版本完全相同。但我不确定这是否对我有帮助。我在我的项目中使用的是更高版本，现在更改版本可能有点像噩梦。我使用的是.less文件，所有不同的组件都有单独的文件，包括carousel，所以我会查看其中是否有任何明显的内容。我认为您需要深入了解carousal实现，js和css，以便了解差异。我会检查一下，这似乎是合理的。
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
> .item {
display: none;
position: relative;
.transition(.6s ease-in-out left);
// Account for jankitude on images
> img,
> a > img {
&:extend(.img-responsive);
line-height: 1;
}
// WebKit CSS3 transforms for supported devices
@media all and (transform-3d), (-webkit-transform-3d) {
.transition-transform(~'0.6s ease-in-out');
.backface-visibility(~'hidden');
.perspective(1000px);
&.next,
&.active.right {
.translate3d(16.6%, 0, 0);
left: 0;
}
&.prev,
&.active.left {
.translate3d(-16.6%, 0, 0);
left: 0;
}
&.next.left,
&.prev.right,
&.active {
.translate3d(0, 0, 0);
left: 0;
}
}
}
.active,
.next,
.prev {
display: block;
}
.active {
left: 0;
}
.next,
.prev {
position: absolute;
top: 0;
width: 100%;
}
.next {
left: 16.6%;
}
.prev {
left: -16.6%;
}
.next.left,
.prev.right {
left: 0;
}
.active.left {
left: -16.6%;
}
.active.right {
left: 16.6%;
}
}