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 3 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 3 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
hans.tielens pro answered 7 years ago
.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
Magdalena Obalska free answered 7 years ago
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.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No