Posted inJavaScript / jQuery

bootstrap 4 carousel multiple items increment by 1

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype