MDBootstrap 4.4 PRO Multi-Item Carousel Issue

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

<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">

<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>

<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>

<div class="carousel-inner" role="listbox">

<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(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>

</div>

</div>

Add comment

Marta Szymanska staff pro premium answered 7 years ago

1 0 Best answer

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

Add comment

Magdalena Obalska answered 7 years ago

0 0 Best answer

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.

Add comment

hans.tielens pro answered 7 years ago

0 0 Best answer

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

Add comment

hans.tielens pro answered 7 years ago

0 0 Best answer

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 commented 7 years ago

Thank you very much..

Add comment

azorano answered 4 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

About author

Krystyn Gatewood

Pro User

0Support score
1Questions 0Answers

0Snippets likes 0Snippets