Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

MDBootstrap 4.4 PRO Multi-Item Carousel Issue

MDB SupportCategory: MDB jQueryMDBootstrap 4.4 PRO Multi-Item Carousel Issue
Krystyn Gatewood asked 6 days ago in MDB pro, version:4

When I use the multi Item carousel and set the card sizes to anything other than col-md-4, it aligns the cards into a vertical line instead of a horizontal line.

I would like to do a multi item carousel with 6 cards on it, but it does not work. It works great using col-md-4 though!

Here is the code I am using from your website…modified to be 6 cards.

Start your code here

<!–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”>

<!–First slide–>
<div class=”carousel-item active”>

<div class=”col-md-2″>
<div class=”card”>
<img class=”img-fluid” 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.</p>
<a class=”btn btn-primary”>Button</a>
</div>
</div>
</div>

<div class=”col-md-2 clearfix d-none d-md-block”>
<div class=”card”>
<img class=”img-fluid” src=”https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).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.</p>
<a class=”btn btn-primary”>Button</a>
</div>
</div>
</div>

<div class=”col-md-2 clearfix d-none d-md-block”>
<div class=”card”>
<img class=”img-fluid” src=”https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).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.</p>
<a class=”btn btn-primary”>Button</a>
</div>
</div>
</div>

<div class=”col-md-2 clearfix d-none d-md-block”>
<div class=”card”>
<img class=”img-fluid” 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.</p>
<a class=”btn btn-primary”>Button</a>
</div>
</div>
</div>

<div class=”col-md-2 clearfix d-none d-md-block”>
<div class=”card”>
<img class=”img-fluid” src=”https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).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.</p>
<a class=”btn btn-primary”>Button</a>
</div>
</div>
</div>

<div class=”col-md-2 clearfix d-none d-md-block”>
<div class=”card”>
<img class=”img-fluid” src=”https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).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.</p>
<a class=”btn btn-primary”>Button</a>
</div>
</div>
</div>

</div>
<!–/.First slide–>

 

</div>
<!–/.Slides–>

</div>

 

3 Answers
Magdalena Obalska answered 4 days ago

Hi,

mdb multi-item carousel is based on col-md-4 and that’s just the reason why everything works perfect¬†only with this class.
If you want to modificate it, you can try to change .carousel-multi-item column width manually.

hans.tielens answered 11 hours ago

Hi,

I’m having the same issue here: I want to display only 2 items per slide om MD and LG devices, so I declared them col-md-5 or col-md-6. The items contain forms that are hard to handle when displayed per three on MD or LG devices, so I really need them to be displayed per pair in those cases…

On XL devices, where I use the standard 3 items per slide, the carousel works fine, but on MD and LG devices the items align vertically. Can you please consider to enhance the multi-item carousel to properly display whatever number of items per slide, or show me a hands-on example on where to change the column width you mention?

Thanks very much for your feedback, I’m stuck for the moment…

Best regards,

Hans

hans.tielens answered 11 hours ago

Hi,

I just added following styling to my css file, and that does the trick:

.carousel-multi-item .col-md-6 {
float: left;
width: 50%;
max-width: 100%;
}

@Krystyn: I suppose you could do the same by adding a col-md-2 style with a width of 16.66666%.

But I still find that these declarations should be incorporated in the mdb.css file…

Best regards,

Hans