我有一个问题,多个轮播在同一页上。我正在使用bootstrap作为我的旋转木马。如果只有一个转盘,转盘工作。但是如果在同一页面上有其他旋转木马,则滑块循环将不起作用。如果我们删除另一个滑块,它将完全正常工作。我已经重命名了两个carousel Package 器ID,并在jQuery中绑定了它们。但它仍然不起作用。
CODEPEN
社会科学委员会
/*
code by Iatek LLC 2018 - CC 2.0 License - Attribution required
code customized by Azmind.com
*/
@media (min-width: 768px) and (max-width: 991px) {
/* Show 4th slide on md if col-md-4*/
.carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%; /*change this with javascript in the future*/
z-index: -1;
display: block;
visibility: visible;
}
}
@media (min-width: 576px) and (max-width: 768px) {
/* Show 3rd slide on sm if col-sm-6*/
.carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -50%; /*change this with javascript in the future*/
z-index: -1;
display: block;
visibility: visible;
}
}
@media (min-width: 576px) {
.carousel-item {
margin-right: 0;
}
/* show 2 items */
.carousel-inner .active + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next {
position: relative;
transform: translate3d(0, 0, 0);
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be also positioned for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
/* MD */
@media (min-width: 768px) {
/* show 3rd of 3 item slide */
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next {
position: relative;
transform: translate3d(0, 0, 0);
}
/* left or forward direction */
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* right or prev direction */
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
/* LG */
@media (min-width: 991px) {
/* show 4th item */
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
transition: none;
}
/* Show 5th slide on lg if col-lg-3 */
.carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -25%; /*change this with javascript in the future*/
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* right or prev direction //t - previous slide direction last item animation fix */
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
HTML
<!-- Top content 1-->
<div class="top-content">
<div class="container-fluid">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img1">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img2">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img3">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img4">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img5">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img6">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img7">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" class="img-fluid mx-auto d-block" alt="img8">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Top content 2 -->
<div class="top-content">
<div class="container-fluid">
<div id="carousel-example-2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img1">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img2">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img3">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img4">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img5">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img6">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img7">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
<img src="https://www.cnet.com/a/img/resize/4afc21739ab279eeb602ae8457f764e4714fed18/2014/06/13/c582d2aa-092e-4d29-a616-a1e5c9403b36/firefox-logo-2014-vertical-4sts.jpg?auto=webp&width=940" class="img-fluid mx-auto d-block" alt="img8">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
jQuery
/*
Carousel
*/
$('#carousel-example,#carousel-example-2').on('slide.bs.carousel', function (e) {
/*
CC 2.0 License Iatek LLC 2018 - Attribution required
*/
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 5;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
我怎样才能使它在自己的旋转木马上循环而不影响另一个旋转木马?
2条答案
按热度按时间ttygqcqt1#
$('.carousel-item')
将查找所有的carousel。您需要添加对当前carousel的引用,即
或
(same输出,不同语法)
appendTo也是一样。
更新的片段:
dxxyhpgq2#
如果您使用bootsrap carousel更好地使用它的类而不是id来使用您的jquery carousel函数在owl carousel 2上使用id在多个carousel上工作相同,只有一个会工作得很好,但使用相同的类可以使所有的carousel工作