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.

Free Live Chat for Any Issue

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.

Rate this post