Multi-item carousel Not Responsive


Topic: Multi-item carousel Not Responsive

Aroquiassamy LA ROZE pro premium asked 2 years ago

HI , In my project im using Multi-Item Carousel which is working fine but when comes to RESPONSIVE it fails to show 'one card' instead showing 'three' as in desktop mode.Kindly give me a solution to resolve this issue....


Damian Gemza staff answered 2 years ago

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


Aroquiassamy LA ROZE pro premium answered 2 years ago

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


Arkadiusz Idzikowski staff answered 2 years ago

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


Arkadiusz Idzikowski staff answered 2 years ago

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>

Aroquiassamy LA ROZE pro premium answered 2 years ago

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 .


Damian Gemza staff answered 2 years ago

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


She Jong Shon pro commented a year ago

This definitely needs to be changed to display every single slide. In terms of user experience, it's not a good case.


Arkadiusz Idzikowski staff commented a year ago

We have plans to change that in the future, but i can't provide an ETA yet.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No