Carousel featuring multiple items with uniformly sized cards

Anticipated outcome: Consistent height across all cards

(each card should adjust its height to match the tallest card)


Actual result: Height varies based on text length

Code Snippet:

NOTICE DIFFERENCES IN HEIGHT AMONG SLIDES

javascripttwitter-bootstrapbootstrap-4mdbootstrap

Answer №1

Implementing a 

style="min-height:300px"
attribute to the card-text element.

To incorporate this feature, utilize the following code snippet:

<div class="container my-4">

  <p class="font-weight-bold">Bootstrap carousel multiple items offers an enhanced version of the traditional Bootstrap carousel that allows for multiple elements.</p>

  <p><strong>For detailed documentation and additional examples of the Bootstrap grid, refer to our <a href="https://mdbootstrap.com/docs/standard/components/carousel/"
                                                                                               target="_blank">Bootstrap Carousel Docs</a>.</p>

  <p>Also, explore the <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced multi-item carousel plugin</strong></a> or the <a target="_blank" href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2904002"><strong>multi-item carousel example for the latest Bootstrap 5</strong></a>.</p>

  <hr class="mt-5">

  <p>Developed with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - a comprehensive Bootstrap UI KIT</p>

  <a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fa fa-download"></i></a>
  <a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
  <a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
  <a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fa fa-github ms-2"></i></a>

  <hr class="mb-5"/>

  <!--Carousel Wrapper-->
  <div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">

    <!--Controls-->
    <div class="controls-top">
      <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
      <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div>
    <!--/.Controls-->

    <!--Indicators-->
    <ol class="carousel-indicators">
      <li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
      <li data-target="#multi-item-example" data-slide-to="1"></li>
      <li data-target="#multi-item-example" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->

    <!--Slides-->
    <div class="carousel-inner" role="listbox">

   // Remaining content omitted for brevity

  </div>
  <!--/.Carousel Wrapper-->


</div>

Answer №2

Important: I'm utilizing the sm breakpoint in these code snippets to ensure visibility without full-screen mode. The sandboxes on MDB and CodePen use the original md breakpoint.

Step 1. Customize Card Height in One Slide

  1. Transform nested blocks .card and .card-body into flex-boxes with a column direction.
  2. Add the property flex-grow: 1; to the block .card-body to occupy all available height.
  3. Apply the same property to the block .card-text to align buttons with the bottom edge of cards efficiently.

I've opted for CSS to avoid repeating utility classes for every block involved. However, for the .col-... blocks, I utilized utility classes like .d-flex, .d-none, and .d-sm-flex to handle card visibility according to screen width changes.

The .clearfix class has been removed as it generates unnecessary pseudo-elements which are not required.

.carousel-equal-heights .carousel-item .card,
.carousel-equal-heights .carousel-item .card-body {
  display: flex;
  flex-direction: column;
}

.carousel-equal-heights .carousel-item .card-body,
.carousel-equal-heights .carousel-item .card-text {
  flex-grow: 1;
}
<div class="container my-4">
  <div class="carousel-equal-heights">
    <div class="carousel-item active">

      <!--Content of a slide-->
      <div class="row">

        <div class="col-sm-4 d-flex">
          <div class="card mb-2">
            <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
            <div class="card-body">
              <h4 class="card-title">Card title</h4>
              <p class="card-text">
                Some quick example text to build on the card title and make up the bulk of the card's content.
                Some quick example text to build on the card title and make up the bulk of the card's content.
                Some quick example text to build on the card title and make up the bulk of the card's content.
              </p>
              <a class="btn btn-primary">Button</a>
            </div>
          </div>
        </div>
        <!-- Other card elements -->
      </div>
     <!-- Additional content -->
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3e3333282f282e3d2c1c68726a726c">[email protected]</a>/dist/css/bootstrap.min.css">

Step 2. Adjust Slide Heights

Unfortunately, the previous method doesn't work for slides due to inactive slides having display: none; and the .carousel-inner container adjusting its height based on the active slide's height.

To overcome this challenge, JavaScript can be used:

  1. Determine the tallest slide's height and apply it to all carousel slides.
  2. Update these values dynamically upon browser window resizing.
  3. Include the property height: 100%; for the .row block in each slide.

For reference, check out the solution on MDB and CodePen.

$(document).ready(function() {
  let $carouselItems = $('.carousel-equal-heights').find('.carousel-item');

  updateItemsHeight();
  $(window).resize(updateItemsHeight);

  function updateItemsHeight() {
    // Remove old value
    $carouselItems.height('auto');

    // Calculate new height
    let maxHeight = 0;
    $carouselItems.each(function() {
      maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });

    // Apply new height
    $carouselItems.each(function() {
      $(this).outerHeight(maxHeight);
    });

    // Display updated height
    console.log('New items height', maxHeight);
  }
});
.carousel-equal-heights .carousel-item > .row {
  height: 100%;
}

.carousel-equal-heights .carousel-item .card,
.carousel-equal-heights .carousel-item .card-body {
  display: flex;
  flex-direction: column;
}

.carousel-equal-heights .carousel-item .card-body,
.carousel-equal-heights .carousel-item .card-text {
  flex-grow: 1;
}
<div class="container my-4">

  <!--Carousel Wrapper-->
  <div id="multi-item-example" class="carousel slide carousel-multi-item carousel-equal-heights" data-ride="carousel">

    <!--Controls-->
    <div class="controls-top">
      <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
      <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div>
    <!--/.Controls-->
  
    <!--Slides-->
    <div class="carousel-inner" role="listbox">

      <!-- Content of slides -->

    </div>
    <!--/.Slides-->

  </div>
  <!--/.Carousel Wrapper-->

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2968c948c92">[email protected]</a>/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1d9c1df">[email protected]</a>/dist/js/bootstrap.min.js"></script>

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

Implement a system in Angular Service that automatically generates user IDs for an array of user inputs

How can I automatically increment the user ID for each new user input and use that value for deletion or updating of specific entries? If a user adds their details as shown in the output picture link below, I want to display the output in a similar format ...

javascriptangulartypescript

Attempting to modify the array within the MongoDB database

I'm attempting to update/add a field in an array of data collection records. { _id: 5f172788d775fa49dc0abe63, filter_count: 5, batch_key: '187aa0b2-f8b7-4b6a-8bd3-4d2df288e673', report_id: '5f0ffbcdd67d70c1a3b143aa ...

javascriptnode.jsmongodbmongoose

The corresponding Javascript method for jquery's ajaxStop

Currently, I have numerous ajax requests running concurrently and I would like to trigger a function once they all have completed. I came across the jQuery function: ajaxStop(), however, I am unable to utilize jQuery in this particular project. Is there ...

javascriptajax

The default value in an Ionic select dropdown remains hidden until it is clicked for the first time

Having an issue with my ion-select in Ionic version 6. I have successfully pre-selected a value when the page loads, but it doesn't show up in the UI until after clicking the select (as shown in pic 2). I'm loading the data in the ionViewWillEnt ...

javascriptangulartypescriptionic-frameworkionic6

Constantly encountering errors instead of obtaining results with each AJAX call

I have a button on my webpage that triggers a JavaScript function I've created. I have successfully debugged into this function. However, whenever the function reaches the AJAX part, it always returns with an error message alert. I aim for the AJAX ...

c#javascriptasp.netajaxasp.net-mvc-4

Clicking the button in Angular should trigger a series of functions to be

It seems like I'm struggling with a simple question due to my lack of experience in this area. Any guidance or help would be greatly appreciated. I have a button that should trigger multiple functions when clicked, all defined in the same ts file. Wh ...

javascriptangulartypescriptbutton

Encountering error message "Module not found '@angular/compiler-cli/ngcc'" while attempting to run "ng serve" for my application

Encountering an error while trying to run my app, I have attempted various solutions available online. These include uninstalling and reinstalling angular/cli, verifying the correct version in package.json (ensuring it is "@angular/cli" and not "@angular-c ...

javascriptnode.jsangularnpmangular-cli

Guide on redirecting the original URL when a partial URL or short URL is entered

Is it possible in PHP to automatically redirect a URL if a partial match like the ones managed by Stack Overflow or other similar sites is detected? For example, can a URL like https://stackoverflow.com/questions/21150608/htaccess-redirect-partial be auto ...

javascriptphpurlhttp-redirect

What is the best way to retrieve all the keys from an array?

I am looking to retrieve the address, latitude, and longitude data dynamically: let Orders= [{ pedido: this.listAddress[0].address, lat: this.listAddress[0].lat, lng: this.listAddress[0].lng }] The above code only fetches the first item from the lis ...

javascriptangularjstypescript

Is it possible to use the Three.js LoadingManager to load videos?

I am currently using THREE.LoadingManager in conjunction with various loaders to efficiently handle the loading of textures, models, images, and cubeTextures before my app is displayed. This setup enables me to present a loading bar that shows the overall ...

javascriptthree.jshtml5-video

Utilizing AngularJS and ADAL.JS to Define Resource ID (Audience)

Is there a way to utilize adal.js within AngularJS to obtain a bearer token for the audience https://management.azure.com through JavaScript? I have created a client application in Azure AD and configured its permissions to allow access to the "Windows Az ...

javascriptangularjsazureazure-active-directoryadal.js

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

After fetching data from an API, I stored an array in a state. Upon trying to update a specific field within an object inside the array using user input, I encountered the error message: 'Uncaught TypeError: Cannot assign to read only property 'a ...

javascriptreactjstypescript

Button that is disabled can still successfully submit the form

I have encountered an issue where the save button becomes disabled after clicking it once. However, when clicked again, it actually resubmits the form. It seems like it never reaches the initial part of the if statement. Any assistance on this matter would ...

jquerybuttonjavascript

using javascript to retrieve php variables

After creating a webpage, setting up Apache2 on an Ubuntu server to access it over the internet, and installing PHP5 and MySQL, I encountered issues with accessing database information on my page through a .php file. Despite having a file named test.php th ...

javascriptphphtmlmysql

Unexpected TypeError thrown by a simple react-cube-navigation demonstration

Looking to utilize the react-cube-navigation component, available here. Encountering a TypeError when attempting to run the provided example, React throws an error: TypeError: props.rotateY.to(function (x) { return "scale is not a function. ( ...

javascriptreactjsnpm

Is it possible for you to enter "1.00" instead of just 1 when using the input type as number?

I am using Polymer paper-input and I would like to ensure that my input with type "number" always displays 2 decimal points, even when it is a whole number. Instead of just displaying as "1", I want it to be shown as "1.00" at all times. I have tried sett ...

javascripthtmlpolymer-1.0

What is the best way to dynamically insert an email value into a JSON file?

Here is the structure of my JSON file: test.json: { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b8a1baa093beb2babfbabdb2a7bca1fdb0bcbe">[email protected]</a>", "password": "Sanju@143", ...

javascriptjson

Deciphering Keycodes in Chrome for Mac OS is a must-know skill for smooth

Is there a way to prevent the '-' key from being pressed on an input field? Initially, I tried using the following solution: if(e.keycode == 189 || e.which == 189 ){ return false; } However, it turns out that both the '-' and &apos ...

javascriptjquerymacosgoogle-chrome

the function does not wait for the DOM content to finish loading

As I execute the code, an error occurs stating that setting innerText of Null is not allowed. I understand that this is because my function runs before the DOM is completely loaded, but I am unsure of how to resolve this issue. Attempts have been made usi ...

javascripthtmlreactjsdomasync-await

Error: The default export is not a component compatible with React in the specified page: "/"

I'm facing an issue while building my next app. Despite using export default, I keep encountering an error that others have mentioned as well. My aim is to create a wrapper for my pages in order to incorporate elements like navigation and footer. vi ...

javascriptreactjstypescriptnext.jseslint