我正在使用缩略图轮播 - 单张图片滑动 here ,我复制了完整的 slider 并将其添加到我的网站中,但现在它滑动了所有图像。我的网站在此处完整编码,如需查看更多信息,请访问 Here
我一次只想放一张幻灯片,但当我将它添加到我的网站时,它会一次滚动完整的 slider ,然后显示下一张幻灯片帮助我!
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 1000
})
$('.fdi-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));
}
});
});
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://knowy.co.in/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://www.knowy.co.in/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel fdi-Carousel slide">
<!-- Carousel items -->
<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
<div class="carousel-inner onebyone-carosel">
<div class="item active">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">1</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">2</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">3</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">4</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">5</div>
</div>
</div>
<div class="item">
<div class="col-md-4">
<a href="#"><img src="http://placehold.it/250x250" class="img-responsive center-block"></a>
<div class="text-center">6</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#eventCarousel" data-slide="prev"></a>
<a class="right carousel-control" href="#eventCarousel" data-slide="next"></a>
</div>
<!--/carousel-inner-->
</div><!--/myCarousel-->
最佳答案
您使用的是哪个版本的 Bootstrap?在 3.3.1 版本之后,Carousel 正在为动画使用 CSS 变换。看到这个答案:Bootstrap carousel multiple frames at once
关于java - 缩略图轮播 - 单张图片滑动显示错误。它正在滑动全 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45498468/