Topic: Carousel (Multi-item) jumps over items if small screen

AnnaK premium asked 3 years ago


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(, 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>
                <button class="btn next-button">Lue lisää</button>

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

AnnaK premium commented 2 years ago

This works, thank you. Yes, please update the code example :)

Please insert min. 20 characters.


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



Specification of the issue

  • User: Premium
  • 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