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.
Related
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>
Is there any way I can get the example I have at https://jsfiddle.net/PortfolioCSG/wzcgp7y1/15/ to change slides by scrolling the users mouse (as well as using the navigation dots/arrows)?
I'd like for the user to be able to scroll through the slideshow/gallery without having to click the mouse if they don't want to, but I'm having trouble writing the code/finding something that works.
I've tried a few different javascript codes and have failed at this point.
TIA.
<div class="slideshow-container">
<div class="mySlides1 fade">
<!--Image here-->
<div class="image img1">Image 1-1</div>
</div>
<div class="mySlides1 fade">
<!--Image here-->
<div class="image img2">Image 1-2</div>
</div>
<div class="mySlides1 fade">
<!--Image here-->
<div class="image img3">Image 1-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a> <a class="next" onclick="plusSlides(1, 0)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,0)"></span> <span class="dot" onclick="currentSlide(2,0)"></span> <span class="dot" onclick="currentSlide(3,0)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides2 fade">
<!--Image here-->
<div class="image img1">Image 2-1</div>
</div>
<div class="mySlides2 fade">
<!--Image here-->
<div class="image img2">Image 2-2</div>
</div>
<div class="mySlides2 fade">
<!--Image here-->
<div class="image img3">Image 2-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a> <a class="next" onclick="plusSlides(1, 1)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,1)"></span> <span class="dot" onclick="currentSlide(2,1)"></span> <span class="dot" onclick="currentSlide(3,1)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides3 fade">
<!--Image here-->
<div class="image img1">Image 3-1</div>
</div>
<div class="mySlides3 fade">
<!--Image here-->
<div class="image img2">Image 3-2</div>
</div>
<div class="mySlides3 fade">
<!--Image here-->
<div class="image img3">Image 3-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,2)"></span> <span class="dot" onclick="currentSlide(2,2)"></span> <span class="dot" onclick="currentSlide(3,2)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides4 fade">
<!--Image here-->
<div class="image img1">Image 4-1</div>
</div>
<div class="mySlides4 fade">
<!--Image here-->
<div class="image img2">Image 4-2</div>
</div>
<div class="mySlides4 fade">
<!--Image here-->
<div class="image img3">Image 4-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a> <a class="next" onclick="plusSlides(1, 3)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,3)"></span> <span class="dot" onclick="currentSlide(2,3)"></span> <span class="dot" onclick="currentSlide(3,3)"></span> </div>
</div>
<div class="slideshow-container">
<div class="mySlides5 fade">
<!--Image here-->
<div class="image img1">Image 5-1</div>
</div>
<div class="mySlides5 fade">
<!--Image here-->
<div class="image img2">Image 5-2</div>
</div>
<div class="mySlides5 fade">
<!--Image here-->
<div class="image img3">Image 5-3</div>
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a> <a class="next" onclick="plusSlides(1, 4)">❯</a>
<div style="text-align:center"> <span class="dot" onclick="currentSlide(1,4)"></span> <span class="dot" onclick="currentSlide(2,4)"></span> <span class="dot" onclick="currentSlide(3,4)"></span> </div>
</div>
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5 {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin:0 auto 25px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next, .text {
font-size: 11px
}
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.image {
height:100px;
background:red;
}
.img1 {
background:red
}
.img2 {
background:yellow
}
.img3 {
background:green
}
var slideIndex = [1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function currentSlide(n, no) {
showSlides(slideIndex[no] = n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
I'm not 100% certain of what you want, but here is an approach that may help you change images by scrolling.
How it works: the event listener triggers a function when the page has been scrolled. Then we use window.scrollY which returns the number of pixels that the document is currently scrolled vertically and we use this number to make the changes to the slider.
const slider = document.getElementById('slider');
document.addEventListener('scroll', (e) => {
let y = window.scrollY;
if(y < 100){
slider.src = "https://picsum.photos/id/50/300";
}
else if(y < 200){
slider.src = "https://picsum.photos/id/100/300";
}
else if(y < 300){
slider.src = "https://picsum.photos/id/200/300";
}
})
<body style="height:2000px">
<img id="slider" style="position:fixed" src="https://picsum.photos/id/50/300">
</body>
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>
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>
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.