Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  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

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

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
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
matdiy
Pro User 15Support score
2Questions 3Answers 0Snippets