Multiple carousels on the same page issue

Multiple carousels on the same page issue - javascript

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..
CODEPEN
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?

$('.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/bootstrap#4.0.0/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/bootstrap#4.0.0/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>

Related

How to turn a container div into content slider

I'm working with Bootstrap 3 and I have made this div:
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<div class="row">
<div class="col-md-3 col-sm-6 section-two-title">
<h1 class="text-center m-0 py-2">
Newest
</h1>
<h1 class="text-center m-0 py-2">
Courses
</h1>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the result looks like this:
But as I mentioned out in the image, I need to add two icons at the right and left of the cards in order to browse more courses.
So it would be a dynamic content slider.
But I don't know how to do that, so I would really appreciate if you could help me with this...
And here is also the CSS part:
.second-para{
height:500px;
background-color: #ffcc32 !important;
}
.second-section, .third-section, .fourth-section{
padding-top:100px;
}
.card-section{
border-radius: 2%;
}
.second-section img, .third-section img, .fourth-section img{
height:150px;
width:100%;
}
.second-section .item, .third-section .item, .fourth-section .item{
padding-left:5px;
padding-right:5px;
}
.second-section .item-card, .third-section .item-card, .fourth-section .item-card{
transition:0.5s;
cursor:pointer;
}
.second-section .item-card-title, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
}
.second-section .item-card-title i, .third-section .item-card-title, .fourth-section .item-card-title{
font-size:15px;
transition:1s;
cursor:pointer;
color:#ffa710
}
.second-section .card-title i:hover,.third-section .card-title i:hover,.fourth-section .card-title i:hover{
transform: scale(1.25) rotate(100deg);
color:#18d4ca;
}
.second-section .card:hover,.third-section .card:hover,.fourth-section .card:hover{
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0,0,0,0.3);
}
.second-section .card-text,.third-section .card-text,.fourth-section .card-text{
height:80px;
}
.second-section .card::before, .card::after,.third-section .card::before,.fourth-section .card::before, .card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,.third-section .card::before,.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before, .card:hover::after, .card:focus::before, .card:focus::after,.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title, .section-three-title,.section-fourth-title{
padding-top:5%;
}
.section-two-title h1, .section-three-title h1, .section-fourth-title h1{
font-size:30px !important;
}

As mentioned, you can use Bootstrap's Carousel
You need custom code, however, to show multiple cards at once: Bootstrap carousel multiple frames at once
See this CodePly for another example: https://www.codeply.com/p/0CWffz76Q9
/* https://stackoverflow.com/a/20008623 */
let items = document.querySelectorAll('.carousel .carousel-item')
window.addEventListener('resize', initCarousel);
initCarousel();
function initCarousel() {
items.forEach((el) => {
// number of slides per carousel-item
const minPerSlide = getMinSlides();
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
// wrap carousel by using first child
next = items[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.children[0])
next = next.nextElementSibling
}
})
}
function getMinSlides() {
// https://stackoverflow.com/a/8876069
const width = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
)
if (width < 576) return 1
if (width < 768) return 2
return 4
}
.second-para {
height: 500px;
background-color: #ffcc32 !important;
}
.second-section,
.third-section,
.fourth-section {
padding-top: 100px;
}
.card-section {
border-radius: 2%;
}
.second-section img,
.third-section img,
.fourth-section img {
height: 150px;
width: 100%;
}
.second-section .item,
.third-section .item,
.fourth-section .item {
padding-left: 5px;
padding-right: 5px;
}
.second-section .item-card,
.third-section .item-card,
.fourth-section .item-card {
transition: 0.5s;
cursor: pointer;
}
.second-section .item-card-title,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
}
.second-section .item-card-title i,
.third-section .item-card-title,
.fourth-section .item-card-title {
font-size: 15px;
transition: 1s;
cursor: pointer;
color: #ffa710
}
.second-section .card-title i:hover,
.third-section .card-title i:hover,
.fourth-section .card-title i:hover {
transform: scale(1.25) rotate(100deg);
color: #18d4ca;
}
.second-section .card:hover,
.third-section .card:hover,
.fourth-section .card:hover {
transform: scale(1.05);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
.second-section .card-text,
.third-section .card-text,
.fourth-section .card-text {
height: 80px;
}
.second-section .card::before,
.card::after,
.third-section .card::before,
.fourth-section .card::before,
.card::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, 0.1);
content: '';
pointer-events: none;
}
.second-section .card::before,
.third-section .card::before,
.fourth-section .card::before {
transform-origin: left top;
}
.second-section .card::after,
.third-section .card::after {
transform-origin: right bottom;
}
.second-section .card:hover::before,
.card:hover::after,
.card:focus::before,
.card:focus::after,
.third-section .card:hover::before {
transform: scale3d(1, 1, 1);
}
.section-two-title,
.section-three-title,
.section-fourth-title {
padding-top: 5%;
}
.section-two-title h1,
.section-three-title h1,
.section-fourth-title h1 {
font-size: 30px !important;
}
/* More Carousel code */
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* https://stackoverflow.com/a/20008623 */
#media (min-width: 576px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 768px) {
.carousel-inner .carousel-item-end.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-start.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="second-para">
<div class="container">
<div class="second-section">
<div class="container mt-2">
<h1 class="text-center m-0 py-2">
Newest Courses
</h1>
<div class="row">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg" alt="Photo of sunset">
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web .</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-3 col-sm-6 item">
<div class="card item-card card-block card-section">
<img src="https://static.pexels.com/photos/262550/pexels-photo-262550.jpeg" alt="Photo of sunset">
<h5 class="card-title mt-3 mb-3">ProVyuh</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Carousel Bootstrap 5: JQuery to Javascript

I need a bootstrap 5 carousel, showing multiple items and slide one at time. All I need is to translate the Jquery code to pure Javascript. Then I could remove the jquery dependency. I found this solution does the job,
is light, and understandable. So it’s exactly what I need, except it has Jquery depencendy. DEMO
FULL CODE
$('.carousel .carousel-item').each(function() {
var minPerSlide = 4;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 992px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33%);
}
}
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<div class="container text-center">
<div class="row mx-auto my-auto">
<div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=4">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=5">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="http://placehold.it/350x180?text=6">
</div>
</div>
</div>
<a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

Converted version
const minPerSlide = 4;
const parent = document.querySelector(".carousel-inner");
document.querySelectorAll('.carousel-item').forEach(function(item) {
let next = item.nextElementSibling;
if (!next) {
next = parent.querySelector(".carousel-item");
}
let clone = next.querySelector("div").cloneNode(true);
item.appendChild(clone)
for (var i = 0; i < minPerSlide; i++) {
next = next.nextElementSibling;
if (!next) {
next = parent.querySelector(".carousel-item");
}
clone = next.querySelector("div").cloneNode(true);
item.appendChild(clone)
}
});
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(50%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-50%);
}
}
#media (min-width: 992px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33%);
}
}
#media (max-width: 768px) {
.carousel-inner .carousel-item>div {
display: none;
}
.carousel-inner .carousel-item>div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<div class="container text-center">
<div class="row mx-auto my-auto">
<div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=4">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=5">
</div>
</div>
<div class="carousel-item">
<div class="col-lg-4 col-md-6">
<img class="img-fluid" src="https://via.placeholder.com/350x180?text=6">
</div>
</div>
</div>
<a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

Bootstrap 4 carousel jQuery not working as expected

thanks to this question I was able to make my multiple items carousel responsive and to apply my custom style (the red border).
Unfortunately this broke the jQuery code responsible to handle the auto-sliding.
My jQuery/JS skills are not yet sufficient to solve this issue.
Could you help me?
$('#recipeCarousel').carousel({
interval: 3000
})
$('.carousel .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 < 2; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
.carousel-control-prev,
.carousel-control-next {
margin-left: -8em;
margin-right: -8em;
opacity: 1!important;
}
#arrowcolorL {
color: #d3232e;
font-size: 3em;
opacity: 1!important;
}
#arrowcolorR {
color: #d3232e;
font-size: 3em;
opacity: 1!important;
}
.round-container {
display: inline-block;
margin: 10px;
}
.mystyle {
border: 1px solid #d3232e;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="recipeCarousel" class="carousel w-100 " data-ride="carousel">
<div class="carousel-inner text-center w-100" role="listbox" style="padding: 0 10em;">
<div class="carousel-item d-flex row active">
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}"></div>
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}"></div>
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}"></div>
</div>
<div class="carousel-item d-flex row active">
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}"></div>
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}"></div>
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}"></div>
</div>
<div class="carousel-item d-flex row active">
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_01.jpg'%}"></div>
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_02.jpg'%}"></div>
<div class="col-sm-12 col-md-4"> <img class="img-fluid rounded-circle mystyle" src="{% static 'core/src/img/staff_member_03.jpg'%}"></div>
</div>
<a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true" id="arrowcolorL"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true" id="arrowcolorR"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
This a screenshot of the broken layout
and the following screenshot is what I'd like to get (of course with the correct border)
Thank you for any help you can provide!

How to run every slide in carouse Bootstrap? [duplicate]

This question already has answers here:
Bootstrap: Slide only one image among the multiple images in an item of the carousel
(2 answers)
Closed 6 years ago.
I'm developer back-end and not have experience about front-end, but current I have a problem with Bootstrap.
I found an example of carousel slider in BootstrapSnip.
It only skips one image when to click next button.
I want it to skip all image in a row.
In comment, it suggests:
// for every slide in the carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
But I don't know this mean. Can anyone help me how to do it?
Thanks.
To easy look please view my pen at:
codepen.io/r0ysy0301/pen/EgPXXY?editors=1010
Or you can see code at bellow:
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.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));
}
});
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out left;
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out all;
transition: 500ms ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform: none!important;
transform: none!important;
}
}
.multi-item-carousel .carouse-control.left,
.multi-item-carousel .carouse-control.right {
background-image: none;
}
body {
background: #333;
color: #ddd;
}
h1 {
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px #000000;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></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>
</div>

See the codepen Just you have to do some changes in the markup.
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.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));
}
});
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out left;
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
-webkit-transition: 500ms ease-in-out all;
transition: 500ms ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform: none!important;
transform: none!important;
}
}
.multi-item-carousel .carouse-control.left,
.multi-item-carousel .carouse-control.right {
background-image: none;
}
body {
background: #333;
color: #ddd;
}
h1 {
color: white;
font-size: 2.25em;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
text-shadow: 0px 2px 0px #000000;
}
<div class="container">
<div class="col-xs-12">
<h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-xs-3"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>

See this link http://www.bootply.com/89193 and this one http://www.bootply.com/92514
I hope you will find something useful

Checkout this ink
https://getbootstrap.com/examples/carousel/
goto to this and do inspect elements and you can find carousel slider.
In your code please checkout that you have linked JS and CSS to html file.

Making Carousel which displays part of next/prev responsive

I have a carousel which displays parts of the next and prev images but at the moment it is not responsive for anything above mobile size. Here is the code:
<style>
.item img:first-child,
.item img:last-child {
display: none;
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
.item img {
float: left;
/*width: 600px;*/
}
.item img:first-child,
.item img:last-child {
display: block;
}
.item.active {
overflow: hidden;
margin: 0 -546px;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.item img {
/*width: 600px;*/
}
.item.active {
margin: 0 -434px;
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
.item img {
/*width: 600px;*/
}
.item.active {
margin: 0 -427px;
}
}
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
</style>
<div class="container-fluid no-pad">
<div class="row">
<div class="col-lg-12 no-pad">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div align="center" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
</div>
<div class="item">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
</div>
<div class="item">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
</div>
<div class="item">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
</div>
<div class="item">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
</div>
<div class="item">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
<img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
I want the carousel to shrink (which is why I added img-responsive BS class). But at the moment it is staying the same size

I hope is this what you are looking for, I have simplified your CSS:
.item img {
float:left;
max-width:33.33% !important;
}
#media (max-width: 768px) {
.item img {
max-width:100% !important;
}
.item img:first-child,
.item img:last-child {
display: none !important;
}
}
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
.carousel-inner .prev { left: -33%; }
Check the JSFiddle result here.

Develop Reference

JavaScript is the programming language of the Web.

Multiple carousels on the same page issue - javascript

Related

How to turn a container div into content slider

Carousel Bootstrap 5: JQuery to Javascript

Bootstrap 4 carousel jQuery not working as expected

How to run every slide in carouse Bootstrap? [duplicate]

Making Carousel which displays part of next/prev responsive

Categories

Resources