Bootstrap 4 Carousel with Multiple Items: How To Create It?

Published on: Feb 06 2019 by Anli

Bootstrap 4 Carousel with Multiple Items: How To Create It?

A few days ago I created these Bootstrap 4 Carousel templates and then I wrote a tutorial about different ways to disable the autoplay feature.

Today we’ll continue with another tutorial, this time about how to create a responsive Bootstrap 4 Carousel with Multiple Items.

We’ll do this by using some CSS media queries and, as usual, some JavaScript (jQuery) code. Let’s see!


1. Introduction

For this tutorial we’ll use one of the templates I mentioned above, which I’ve created using the Bootstrap carousel component. Also we’ll use Bootstrap version 4.2.1.

Here is an image preview of the final result:

Bootstrap 4 Carousel with Multiple Items

And here is a LIVE DEMO.

Before writing this tutorial I didn’t know how to create this type of carousel or slideshow. So with a few Google searches I found this discussion on stackoverflow.

There I found this code, which was based on this, which was made by this company (thank you 😉 ).

I took that code, customized it a bit to match the style of my template and, after some trial and error, I managed to create the carousel just as I wanted it and as we’re seeing in this guide.

Ok, after this introduction, now let’s continue with the HTML code.

2. The HTML

The HTML code which you can find in the “index.html” file, is very simple as it’s similar to a “normal” Bootstrap carousel.

The difference is that we use different columns for each image and different column sizes for each screen size (smartphones, tablets, desktops) to make it responsive. Read the Bootstrap grid documentation here to learn more or just to refresh your memory.

Here is the HTML code:

<!-- Top content -->
<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="assets/img/backgrounds/1.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="assets/img/backgrounds/2.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="assets/img/backgrounds/3.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="assets/img/backgrounds/4.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="assets/img/backgrounds/5.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="assets/img/backgrounds/6.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="assets/img/backgrounds/7.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="assets/img/backgrounds/8.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>

3. The CSS

I have divided the CSS code in 3 files for simplicity (“style.css”, “media-queries.css”, “carousel.css”) but you can merge them together in a production website to reduce HTTP requests and improve load time. You can find them in the folder “assets/css”.

As the name suggests, the code that handles the carousel behaviour is in “carousel.css”. As I said above, I found it with a few Google searches and modified it for my template.

The code in the other two files (“style.css” and “media-queries.css”) is for styling other parts of the template, not the carousel. I’ll not show it here, to keep the tutorial short.

We use some Media Queries to display the various slides in different screen sizes.

Here is the CSS code:

/*
    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;
    }
}

4. The JavaScript

Now with the JavaScript (jQuery) code that you can see below and that I’ve added in the file “scripts.js” (assets/js), we use the event “slide.bs.carousel” to append the slides in the right position of the carousel immediately when the carousel moves to the left or right.

Here you can see the available Bootstrap carousel’s events.

And here is the JavaScript code:

/*
    Carousel
*/
$('#carousel-example').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');
            }
        }
    }
});

5. Demo, Download and License

VIEW DEMO

DOWNLOAD: Bootstrap Carousel with Multiple Items (3218 downloads)

LICENSE:

You can use these templates in personal and commercial projects (if not otherwise specified in the single files), but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

6. Conclusion

That’s it! I hope you learned something new with this tutorial that you can use in your projects.

The carousel we created shows 4 slides at a time in large (desktop) screens, but you can play and experiment with the code if you want to show a different number of slides.

If you have any question or suggestion, let me know in the comments below.

Filed under: Bootstrap, Tutorials

13 Comments So Far

  1. Lrrr says:

    Carousel not working for number of items same or less then itemsPerSlide variable.

  2. Sebastiaan van Dijk says:

    Hi, this finally is a version that just works in all versions of Bootstrap 4. I’ve adapted it to use cards instead of just images, which gives a nice twist. What gets me though is that I ony need to show three items instead of four on large screens, but I cannot for the life of me figure out what the magic combination is to adapt your code to cater for that. Whichever way I tweak this I get that the next or previous slide is only loaded when the user clicks the previous/next buttons. In the above example it seems like the next/previous item is preloaded or something. Can you give a hin as to how to tweak the code to only show three instead of four to begin with? I.e. not the lg-3 option, but just start with md-4. The responsiveness shouldn’t change as the way it works now it is great.

  3. Zuhaib sarwat says:

    Last item doesnt loop back to first item.slide takes 3 more transition for the first item to show..

  4. Zuhaib sarwat says:

    carousel not showing first element after the last element instead takes 3 more transition for the first one to show. help on this anyone???

  5. Ihsan Fajari says:

    Works well for me, thanks for sharing this code!

  6. sam says:

    How can I change the transition and show 8 items by slides?

  7. abdollah says:

    one carousel is work bu when i use two slider in one page dosent work

  8. Apple says:

    Hello! carousel not showing first element after the last element instead takes 3 more transition for the first one to show. help on this anyone??? how to fix?

  9. mona says:

    Hi, thank you for ur great work, i’ve a question..
    i need to customize the design and add 6 items in row, i added the class “col-lg-2” but it’s not working.
    thank u in advanced 🙂 .

  10. Alan says:

    It looks like the index (idx) in the JavaScript is always 4, making the loop unnecessary.

    if (idx >= totalItems-(itemsPerSlide-1)) {

    $(‘.carousel-item’).eq(0).appendTo(‘.carousel-inner’);

    }

Leave a Reply

To learn how we use your data when you comment, read our Privacy Policy here.