MDB Carousel multiple slides visible

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB Carousel multiple slides visible

matdiy pro asked 6 years ago

Hello there, Is it possible to have a carousel that has multiple slides but each slide only contains one card and then move along one slide at a time? Rather than a slide containing 3 cards. Basically multiple slides will be visible and just slide by one each time. It's very hard to build a dynamic carousel with Angular 5 by splitting the slides down within a repeat. Best regards Mat  

Damian Gemza staff commented 6 years ago

Dear matdiy, If you want to have only 1 card in each slide, you have to remove unnecessary cards from each slide, and change col-md-4 to col-md-12. And that's all. Best Regards, Damian

matdiy pro commented 6 years ago

Hi Damian, No I still want 3 cards to be visible but the carousel only move right by 1 card each time. I don’t want multiple slides with multiple cards within. Can you advise? Mat

matdiy pro answered 6 years ago

Hi Damian, No I still want 3 cards to be visible but the carousel only move right by 1 card each time. I don't want multiple slides with multiple cards within. Can you advise? Mat

matdiy pro answered 6 years ago

I have made a workable solution for this see below:-
<div class="col-md-12" *ngFor="let article of articles; let i = index">
      <mdb-slide class="col-xl-12 col-lg-12 col-md-12 col-sm-12" *ngIf=" i % 3 === 0 ">
          <div class="col-md-4" *ngFor="let article of articles.slice(i, i + 3)">
              {{ item }}
          </div>
      </mdb-slide>
</div>
It doesn't move by one but will suffice for what I need.
Mat

Damian Gemza staff commented 6 years ago

Do you still need help from me? I can't provide you ready-to-use code for your desired behavior, because we're not support such behavior in our Carousel Component. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
matdiy
Pro User
15Support score
2Questions 3Answers
0Snippets likes 0Snippets