'Multiple carousels on the same page issue
I am having an issue with multiple carousels on the same page. I'm using bootstrap for my carousels. The carousel works if there is only 1 carousel. But if there is other carousels on the same page, the slider loop would not work. If we remove another slider, it will work perfectly fine. I've renamed both carousel wrapper ID and also bind both of them in the jQuery.. but its still not working..
css
/*
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');
}
}
}
});
How can I make it loop and on its own carousel without affecting another carousel?
Solution 1:[1]
$('.carousel-item') will find all, across all carousels.
You need to add a reference to the current carousel, ie
$(this).find('.carousel-item').length;
or
$('.carousel-item', this).length;
(same output, different syntax)
The same for the appendTo.
Updated snippet:
/*
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 = $(this).find('.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', this).eq(i).appendTo($('.carousel-inner', this));
} else {
$('.carousel-item', this).eq(0).appendTo($('.carousel-inner', this));
}
}
}
});/*
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;
}
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- 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>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | freedomn-m |