Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: MDBootstrap 4.4 PRO Multi-Item Carousel Issue

Krystyn Gatewood pro asked 7 years ago

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>

 

azorano free answered 4 years ago

Good people. Morning. I'm "reopening" this thread bcs I have an issue regarding this.Please check attachment. Have searched a lot but no luck. Does anyone have a workaround for this?

https://www.dropbox.com/s/h0leyymbsc6ommp/RPReplay_Final1605955961.mov?dl=0

Bottom line: * Issues are mostly seen around the .col-md-5 / .col-md-6 declaration up, but not downward. * However, .col-12 works great for mobile - no animation issues - but from .md (inclusive) up has some issues. * Would be great to present - 2 columns only - on .md devices like iPad on portrait mode, as it makes a lot of sense, taking into account that .md-4 content squeezes :(

No solutions online as far as I know. Looking forward to seeing the solution or a fix. Thanks.

Krzysztof Wilk staff commented 4 years ago

Hi!

Could you provide a snippet with this problem using our online editor (https://mdbootstrap.com/snippets/)? It'll be very helpful :)

Best regards

Marta Wierzbicka staff answered 7 years 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

hans.tielens pro answered 7 years 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

Krystyn Gatewood pro commented 7 years 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.

Ram Meena free commented 7 years ago

Thank you very much..

hans.tielens pro answered 7 years 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

Magdalena Obalska free answered 7 years 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 commented 7 years 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.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
About author
Krystyn Gatewood
Pro User 0Support score
1Questions 0Answers 0Snippets