Creating a responsive Bootstrap 5 carousel with multiple items

Is there a way to modify the Bootstrap 5 carousel to display approximately 3 items (cards) per slide on desktop/laptop screens, but only 1 item on smaller devices (768px or less)? Currently, the items are stacking on top of each other instead of appearing side by side.

For reference, here is the code snippet - JSFiddle

var carouselExampleControls = document.querySelector('#carouselExampleControls')
var carousel = new bootstrap.Carousel(carouselExampleControls, {
  interval: 0,
  wrap: false
});
@media (min-width: 768px) {
    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    ...

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d7dadac1c6c1c7d4c5f5809b859b87">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" ...
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790c1709170b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" ...

...

htmlcsscarouselbootstrap-5

Answer №1

I believe that this piece of code will prove to be quite beneficial.

let elements = document.querySelectorAll('.carousel .carousel-item')

elements.forEach((element) => {
    const minPerItem = 4
    let nextElement = element.nextElementSibling
    for (var i=1; i<minPerItem; i++) {
        if (!nextElement) {
            // wrap carousel using the first child
            nextElement = elements[0]
        }
        let clonedChild = nextElement.cloneNode(true)
        element.appendChild(clonedChild.children[0])
        nextElement = nextElement.nextElementSibling
    }
})
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* for medium and larger screens */
@media (min-width: 768px) {
    
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    .carousel-inner .carousel-item-start.active, 
    .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}
<div class="container text-center my-3">
    <h2 class="font-weight-light">Bootstrap Multi Slide Carousel</h2>
    <div class="row mx-auto my-auto justify-content-center">
        <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/31f?text=1" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 1</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/e66?text=2" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 2</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/7d2?text=3" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 3</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400?text=4" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 4</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/aba?text=5" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 5</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-img">
                                <img src="//via.placeholder.com/500x400/fc0?text=6" class="img-fluid">
                            </div>
                            <div class="card-img-overlay">Slide 6</div>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>
    </div>
    <h5 class="mt-2 fw-light">advances one slide at a time</h5>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My content is being obstructed by a single-page navigation system

I attempted to create a simplified version of the issue I am facing. Basically, I am working on a header with navigation that stays at the top of the page while scrolling. The problem arises when clicking on a section in the navigation. The screen scrolls ...

javascriptjqueryhtmlcss

Having trouble with JQuery's .prop function not unchecking a checkbox?

I have been experimenting with different solutions in order to uncheck a checkbox when another checkbox is checked. Unfortunately, none of the methods I've tried seem to be working effectively... Currently, my code looks like this: $("#chkBox1").cli ...

javascriptjqueryhtmljquery-mobilecheckbox

Having trouble displaying the Order List in Tailwind CSS and Next.js?

I am having trouble displaying an ordered list on my page. I have tried using the <ol> tag, but for some reason the numbers are not showing up. Even when I switch to the <ul> tag, it's still not working properly. Take a look at this scree ...

htmlnext.jstailwind-css

The never-ending loading problem at the bottom of the Firefox screen seems

I am facing an issue while trying to open something in Firefox using window.open(). The loading screen seems to never stop, and I cannot pinpoint the reason behind it. Any advice on how to resolve this would be greatly appreciated. View Screenshot: This ...

javascriptcssbackbone.jsmarionette

Is there a way for an inline element like <a> to enclose block level elements within it?

<a href="#"> <h1>Our Premier Package</h1> <h2>The top choice among our clients</h2> <p> Enjoy expanded storage and quicker assistance to guarantee constant access to your cruci ...

html

Error importing reach-router in Gatsbyjs causing website to break

While working on my Gatsby project, I decided to incorporate the React Cookie Consent package. However, upon installation and implementation attempt, my website crashed, displaying this error message: warn ./.cache/root.js Attempted import error: &a ...

javascripthtmlnpmgatsby

What is the best way to display time in EJS?

Currently facing an issue with formatting a time retrieved from the database. The value is strictly a time and not associated with any date. I've attempted to use getHours and getMinutes in EJS, but they don't seem to be functioning as expected. ...

htmlnode.jsejs

Issue with Ajax when attempting to load new content into a div after submitting a form

After implementing the code below to submit a form and use ajax to load the action page into a div on the same page, I am encountering an issue where clicking submit results in a duplicate copy of the form appearing again. <script src="//ajax.googleapi ...

jqueryhtmlajax

Utilize BootStrap framework to embed Twitch player, ensuring it fills the entire width of its parent element

I'm new to web development and struggling to make my embedded Twitch player use its parent's full width. The height is fine, but using the d-flex class from Bootstrap makes the player extremely thin. Please review my code here: https://jsfiddle. ...

htmlcssbootstrap-4twitch

Creating a versatile design using a combination of grids, HTML tables, and media queries to ensure

When it comes to developing a responsive website, which method is superior: utilizing grid systems, employing media queries, or relying on HTML tables? ...

htmlcssresponsive-designgridmedia-queries

Create a canvas element to display an image within a picture frame

I am currently developing a customized framing website and aiming to showcase a frame example on the screen as customers input their dimensions. Progress has been made, but I am facing a challenge in cropping the image's corners using an HTML Canvas e ...

javascripthtmlcanvas

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

cssangulartypescript

Issues with the width of Table TD cells not being responsive

I'm having trouble adjusting the width of my dropdown menu columns. I've tried various methods, but can't seem to get each column to be 200px wide as desired. .dropbtn { background-image: url("../sliki/meni.png"); width: 220px; heig ...

htmlcss

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

As a beginner in web programming, I've recently delved into Javascript. A hot debate caught my attention - where should javascript be placed, at the top or at the bottom of a webpage? Supporters of placing it at the top argue that a slow loading time ...

javascripthtml

Ways to eliminate project title from the URL

After removing the hash tag from the URL with $locationProvider.html5Mode(true), I attempted to address the refresh issue by adding the following code to my .htaccess file: Options +FollowSymlinks RewriteEngine On RewriteBase /test/ RewriteCond %{REQUEST_ ...

javascriptjqueryangularjshtml.htaccess

Error in HTML5 video: Unable to access property '0' as it is undefined

I am trying to create a simple block displaying an HTML5 video tag. I want the ability to play different videos along with their titles from a JSON file by using previous and next buttons. Clicking the next button should play the next video, and the same g ...

javascriptjquerycsshtml

The information provided in a PHP form is not saved in a MySQL database

I am trying to create a form using AngularJS to save person details in phpMyAdmin (mysql). However, when I submit the form, the details are not getting added to the database. Can someone please assist me in resolving this issue? Below is the HTML page cod ...

phphtmlmysqlangularjs

Ways to retrieve the text of the chosen radio button label with the help of jQuery

There is a radio button on my webpage that looks like this: <div id="someId"> <label class="radio-inline"> <input name="x" type="radio" onchange="GetSelectedVal();">Yes</label> <label class="radio-inline"> ...

javascriptjqueryhtml

Mistake while defining a global variable within an HTML file and utilizing it

In my HTML document, I have set a global variable like this: <script type="text/javascript"> var total; </script> However, when I try to use this variable, I encounter an error stating that it cannot be used in this context. To resolve this ...

htmlasp.net-mvc-4

What is the best way to incorporate Blade code into a React component within a Blade view file?

Recently, I've been working on a Laravel view named homepage.blade.php, which includes the following code: <body> <div id=root></div> <script src="./js/app.js"></script> </body> In the app.js file: ...

phphtmlreactjslaravellaravel-blade