Topic: Carousel (Multi-item) jumps over items if small screen
Hello!
I have a multi-item carousel in use. I load the items as in the example, in the .ts file. There are 6 items in the carousel. In order to set the maximum amount of slides to show in one time I have set the chunk size to 4:
this.slides = this.chunk(this.cards, 4);
I have buttons to change slides with:
nextSlide() { this.el.nextSlide(); }
previousSlide() { this.el.previousSlide(); }
Here is the carousel code:
<mdb-carousel #carousel [interval]="'0'" [isControls]="false" class="carousel-multi-item multi-animation mt-4" [type]="'carousel-multi-item'" [animation]="'slide'">
<mdb-carousel-item *ngFor="let item of slides; let i = index">
<div class="col-12 col-md-4 col-lg-3 pb-2" [ngClass]="{'d-none d-md-block': cardIndex !== 0}" *ngFor="let card of item; let cardIndex = index">
<mdb-card class="my-1 h-100">
<mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
<mdb-card-body>
<mdb-card-title>
<h2>{{card.title}}</h2>
</mdb-card-title>
<p>{{card.description}}</p>
</mdb-card-body>
<mdb-card-footer>
<button class="btn next-button">Lue lisää</button>
</mdb-card-footer>
</mdb-card>
</div>
</mdb-carousel-item>
</mdb-carousel>
Expected behavior Regardless of the screen size, when calling nextSlide(), the carousel will show the next slide.
Actual behavior If the screen is so big that 4 slides are visible on the screen, everything works ok - if I call nextSlide(), it will show the remaining 2 slides of the 6 slides I have. BUT if I have a smaller screen so that not 4 slides can fit, it jumps over the rest of the four slides.
For example: only one slide can fit on the screen. When I call nextSlide() the carousel jumps to slide 5. If I have 3 slides that fit on the screen, and I call nextSlide() it jumps to slide 5 as well. So on smaller screens the rest of the first 4 slides are never seen.
Can you please advice me on how to get the carousel to show all slides also on smaller screens?
Arkadiusz Idzikowski staff answered 5 years ago
I assume that you used code from the 'Multi-item carousel card decks' example. We need to fix the code of this example because it's not working correctly.
Please use html/ts code from the responsive example and it should work as expected:
https://mdbootstrap.com/docs/angular/advanced/carousel/#multi-item-carousel-responsive
AnnaK pro premium commented 5 years ago
This works, thank you. Yes, please update the code example :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.0.0
- Device: Desktop
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No