bootstrap 4 carousel multiple items increment by 1 : Code to customize the Bootstrap 4 carousel slider component so it does not autoplay and increments by 1 item per click.
bootstrap 4 carousel multiple items increment by 1
Bootstrap 4 responsive carousel multiple items per slide : This source code solves the Bootstrap problem when you need a multi item carousel advance 1 item per time and make it responsive bootstrap 4 carousel example.
HTML Code – bootstrap 4 carousel multiple items increment by 1
This is a work in progress
Script code
$('#carousel').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 4;
var totalItems = $('.slider-profile').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i
CSS Code
.slider-profile {
min-height:250px;
}
@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }
@media (min-width: 576px) and (max-width: 768px){
.advance-slider .active,
.advance-slider .active + .slider-profile,
.advance-slider .active + .slider-profile + .slider-profile {
display: block;
}
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left),
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile,
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile + .slider-profile {
transition: none;
}
.advance-slider .slider-profile-next,
.advance-slider .slider-profile-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.advance-slider .active.slider-profile + .slider-profile + .slider-profile + .slider-profile {
position: absolute;
top: 0;
right: -33%;
z-index: -1;
display: block;
visibility: visible;
}
.active.slider-profile-left + .slider-profile-next.slider-profile-left,
.slider-profile-next.slider-profile-left + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile + .slider-profile
{
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
.advance-slider .slider-profile-prev.slider-profile-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.slider-profile-right + .slider-profile-prev.slider-profile-right,
.slider-profile-prev.slider-profile-right + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile + .slider-profile {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
@media (min-width: 768px) {
.advance-slider .active,
.advance-slider .active + .slider-profile,
.advance-slider .active + .slider-profile + .slider-profile,
.advance-slider .active + .slider-profile + .slider-profile + .slider-profile {
display: block;
}
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left),
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile,
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile + .slider-profile,
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile + .slider-profile + .slider-profile {
transition: none;
}
.advance-slider .slider-profile-next,
.advance-slider .slider-profile-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.advance-slider .active.slider-profile + .slider-profile + .slider-profile + .slider-profile + .slider-profile {
position: absolute;
top: 0;
right: -25%;
z-index: -1;
display: block;
visibility: visible;
}
.active.slider-profile-left + .slider-profile-next.slider-profile-left,
.slider-profile-next.slider-profile-left + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile + .slider-profile + .slider-profile {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.advance-slider .slider-profile-prev.slider-profile-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
.active.slider-profile-right + .slider-profile-prev.slider-profile-right,
.slider-profile-prev.slider-profile-right + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile + .slider-profile + .slider-profile {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
@media (min-width: 768px) {
/* show 3 items */
.advance-slider .active,
.advance-slider .active + .slider-profile,
.advance-slider .active + .slider-profile + .slider-profile,
.advance-slider .active + .slider-profile + .slider-profile + .slider-profile {
display: block;
}
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left),
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile,
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile + .slider-profile,
.advance-slider .slider-profile.active:not(.slider-profile-right):not(.slider-profile-left) + .slider-profile + .slider-profile + .slider-profile {
transition: none;
}
.advance-slider .slider-profile-next,
.advance-slider .slider-profile-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.advance-slider .active.slider-profile + .slider-profile + .slider-profile + .slider-profile + .slider-profile {
position: absolute;
top: 0;
right: -25%;
z-index: -1;
display: block;
visibility: visible;
}
.active.slider-profile-left + .slider-profile-next.slider-profile-left,
.slider-profile-next.slider-profile-left + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile + .slider-profile,
.slider-profile-next.slider-profile-left + .slider-profile + .slider-profile + .slider-profile + .slider-profile {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
.advance-slider .slider-profile-prev.slider-profile-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
.active.slider-profile-right + .slider-profile-prev.slider-profile-right,
.slider-profile-prev.slider-profile-right + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile + .slider-profile,
.slider-profile-prev.slider-profile-right + .slider-profile + .slider-profile + .slider-profile + .slider-profile {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
Don't Miss : Bootstrap Multiple Item Product Carousel Slider
I hope you get an idea about bootstrap 4 carousel multiple items increment by 1.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.