Multi-item carousel Not Responsive

Dear Aroquiassamy LA ROZE,

This is not a bug but a proper behavior. The multi-item carousel works in this way.

On the desktop view it shows every card in one slide, but on mobile, it shows only 1 card.

There's no possibility to change this behavior.

Best Regards, Damian

Hai @Damian I'm Having 13 image and I used Multi-item Carousel.It shows 3 image per slide on desktop view.But,When it comes to MOBILE Version it has to show one image per slide instead it shows 3 images one by one (i.e 3 images on one slide).I don't know how to resolve kindly look at the code below...!

html file:

  <mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'"
    [animation]="'slide'">
    <mdb-carousel-item *ngFor="let item of slides; let i = index">
      <div class="col-md-4 " *ngFor="let card of item">
        <mdb-card class="my-1">
          <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
          <mdb-card-body>
            <mdb-card-title>
              <h4>{{card.title}}</h4>
            </mdb-card-title>
            <p>{{card.description}}</p>
            <a href="#" mdbBtn color="primary" class="waves-light" mdbWavesEffect>{{card.buttonText}}</a>
          </mdb-card-body>
        </mdb-card>
      </div>
    </mdb-carousel-item>
  </mdb-carousel>

TS file:

cards =[ { title: 'Cab Service', description: 'Pondicherry to Mahabhalipuram', buttonText: 'View More', img: 'assets/images/LmsERP/offers/car.jpg' }, { title: 'Annual Exhibition', description: 'colorful Night Stay Free', buttonText: 'View More', img: 'assets/images/LmsERP/offers/dubai.jpg' }, { title: 'Guest House', description: 'Home memories & Peacful Stay', buttonText: 'View More', img: 'assets/images/LmsERP/offers/room1.jpg' }, { title: 'Tour Package', description: 'Summer Special Discounts', buttonText: 'View More', img: 'assets/images/LmsERP/offers/Goa.jpg' }, { title: 'Boat Services', description: 'Reserve tickets & get Best Deals', buttonText: 'View More', img: 'assets/images/LmsERP/offers/boating.jpg' }, { title: 'Village visiting', description: 'Best Handmade Products ', buttonText: 'View More', img: 'assets/images/LmsERP/offers/shopPondy.jpg' }, { title: 'Beauty Spa', description: 'Spa that make you beautiful', buttonText: 'View More', img: 'assets/images/LmsERP/offers/tour_works.jpg' }, ]; slides: any = [[]]; chunk(arr, chunkSize) { let R = []; for (let i = 0, len = arr.length; i < len; i += chunkSize) { R.push(arr.slice(i, i + chunkSize)); } return R; }

Thank you for the details. We will take a closer look at this problem.

It looks like the example in documentation lacks certain styles responsible for displaying the component correctly on smaller screens. We will update the code on our website, please change your html code to:

<mdb-carousel [isControls]="true" class="carousel-multi-item carousel" [type]="'carousel-multi-item'"
  [animation]="'slide'">
  <mdb-carousel-item *ngFor="let item of slides; let i = index">
    <div class="col-md-4" [ngClass]="{'d-none d-md-block': cardIndex !== 0}" *ngFor="let card of item; let cardIndex = index">
      <mdb-card class="my-1">
        <mdb-card-img [src]="card.img" alt="Card image cap"></mdb-card-img>
        <mdb-card-body>
          <mdb-card-title>
            <h4>{{card.title}}</h4>
          </mdb-card-title>
          <p>{{card.description}}</p>
          <a href="#" mdbBtn color="primary" class="waves-light" mdbWavesEffect>{{card.buttonText}}</a>
        </mdb-card-body>
      </mdb-card>
    </div>
  </mdb-carousel-item>
</mdb-carousel>

Hi @Arkadiusz Idzikowski & @Damian,

I used above code but it shows only the First image of every slide.i.e.,im having 9 images which shows 3 images per slides.But on mobile it shows only slides 1,4,7...where's the remaining 2,3,5,6,8,9. It has to be shown as 1,2,3,4,5,6,7,8,9 .

Dear Aroquissamy LA ROZE,

As I said to you before, this is how our multi-item carousel works on mobile. It shows only the first image from each slide in mobile view.

We'll think about changing this behavior in the future, but for now, there's no possibility to change it.

Best Regards, Damian

Hello,

Can you please tell me how the code works in full screen on the website itself. Please see the link below. https://mdbootstrap.com/snippets/jquery/guptaayush03gmail-com/2680647 Please change the screen size to full screen it works fine there. Can you please provide me an explanation for that.