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

<h2>This is a work in progress</h2>
    <div id="carousel" class="carousel slide carousel-showmanymoveone" data-ride="carousel" data-interval="6000">

        <div class="advance-slider row no-gutters w-100 mx-auto" role="listbox">
          
            <div class="slider-profile active col-sm-4 col-md-3">
                <a href="https://www.pakainfo.com/">
                  
                     <img src="https://dummyimage.com/800x800/007aeb/4196e5" alt="Tamilrokers Bew Link" class="d-block img-fluid">

                    <div class="carousel-caption">
                        <div>
                            <h2>Single</h2>
                            <p>We meticously build each site to get results</p>
                            <span class="btn btn-sm btn-outline-secondary">Learn More</span>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.slider-profile -->
            <div class="slider-profile col-sm-4 col-md-3">
                <a href="https://www.pakainfo.com/">
                     <img src="https://dummyimage.com/800x800/007aeb/4196e5" alt="Tamilrokers Bew Link" class="d-block img-fluid">

                    <div class="carousel-caption justify-content-center align-items-center">
                        <div>
                            <h2>Two</h2>
                            <p>We work as an extension of your business to explore solutions</p>
                            <span class="btn btn-sm btn-outline-secondary">Our Process</span>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.slider-profile -->
            <div class="slider-profile col-sm-4 col-md-3">
                <a href="https://www.pakainfo.com/">

                  <img src="https://dummyimage.com/800x800/007aeb/4196e5" alt="Tamilrokers Bew Link" class="d-block img-fluid">
                  
                    <div class="carousel-caption justify-content-center align-items-center">
                        <div>
                            <h2>Three</h2>
                            <p>We monitor and optimize your site's long-term performance</p>
                            <span class="btn btn-sm btn-secondary">Learn How</span>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.slider-profile -->
                      <div class="slider-profile col-sm-4 col-md-3">
                <a href="https://www.pakainfo.com/">
                    <img src="https://dummyimage.com/800x800/007aeb/4196e5" alt="Tamilrokers Bew Link" class="d-block img-fluid">

                    <div class="carousel-caption justify-content-center align-items-center">
                        <div>
                            <h2>Four</h2>
                            <p>We monitor and optimize your site's long-term performance</p>
                            <span class="btn btn-sm btn-secondary">Learn How</span>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.slider-profile -->
                   <div class="slider-profile col-sm-4 col-md-3">
                <a href="https://www.pakainfo.com/">
                    <img src="https://dummyimage.com/800x800/007aeb/4196e5" alt="Tamilrokers Bew Link" class="d-block img-fluid">

                    <div class="carousel-caption justify-content-center align-items-center">
                        <div>
                            <h2>Five</h2>
                            <p>We monitor and optimize your site's long-term performance</p>
                            <span class="btn btn-sm btn-secondary">Learn How</span>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.slider-profile -->
                      <div class="slider-profile col-sm-4 col-md-3">
                <a href="https://www.pakainfo.com/">
                     <img src="https://dummyimage.com/800x800/007aeb/4196e5" alt="Tamilrokers Bew Link" class="d-block img-fluid">

                    <div class="carousel-caption justify-content-center align-items-center">
                        <div>
                            <h2>Six</h2>
                            <p>We monitor and optimize your site's long-term performance</p>
                            <span class="btn btn-sm btn-secondary">Learn How</span>
                        </div>
                    </div>
                </a>
            </div>
            <!-- /.slider-profile -->
          
        </div>
        <!-- /.advance-slider -->
        <a class="carousel-control-prev" href="#carousel" 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" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

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<it; i++) {
            if (e.direction=="left") {
                $('.slider-profile').eq(i).appendTo('.advance-slider');
            }
            else {
                $('.slider-profile').eq(0).appendTo('.advance-slider');
            }
        }
    }
});

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.