Sign in


Sign up


MDBootstrap 4.4 PRO Multi-Item Carousel Issue

MDB SupportCategory: MDB jQueryMDBootstrap 4.4 PRO Multi-Item Carousel Issue
Krystyn Gatewood Pro User asked 4 months 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>

 

4 Answers
Magdalena Obalska answered 4 months 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.

Krystyn Gatewood Pro User replied 4 months ago

Okay. I will revert back to the previous version of MDB Pro, since it allows me to change from col-md-4 to any other col-md size that I wish.

hans.tielens Pro User answered 4 months 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 Pro User answered 4 months 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

Ram Meena replied 1 month ago

Thank you very much..

Krystyn Gatewood Pro User replied 4 months ago

Thank you! I will give this a shot. I just reverted back to the previous MDB Pro version, since that version allows you to do whatever .col class you’d like and properly shows the correct number as they should appear on a desktop. I think on mobile, it still just shows the first slide, I haven’t played with the mobile settings yet.

Marta Szymanska answered 4 months ago

Hi,

I see you guys solved the problem, but if you need more help from MDB team you can send your code to m.szymanska@mdbootstrap.com and I’ll try to help you.

Best,

Marta