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


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

AnnaK pro premium asked 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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
Tags