MDBootstrap 4.4 PRO Multi-Item Carousel Issue


Topic: MDBootstrap 4.4 PRO Multi-Item Carousel Issue

Krystyn Gatewood pro asked 3 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>

 


Marta Szymanska staff pro premium answered 3 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
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 3 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.

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

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

Thank you very much..

azorano pro answered 6 days 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 days 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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No