MDB Angular Carousel of Cards


Topic: MDB Angular Carousel of Cards

Verzea pro asked 7 years ago

Hello, I would like to do the following with the Cards Carousel in MDB Angular (Pro Version):
  1. Slide by only one card at a time instead of three.
  2. Display the arrows at the top, but not the dots at the bottom.
How can I achieve these? Thanks! Alex

Ollie Vincent pro answered 7 years ago

Hi,
I'm going to give you a couple of suggestions but they are purely theory and I haven't tested them - so please let me know if they work... :)
Firstly I would hide the dots in CSS using something like this: .carousel-multi-item .carousel-indicators{display:none;} this way you could make them reappear quite easily should you want to later on.
As for making them slide in 1's rather than 3's you could try this: change the .col-md-4 to .col-md-12 so your first slide would look something like this:

<!--Carousel Wrapper-->
<mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'" [animation]="'slide'">
 <!--First slide-->
 <mdb-slide>
 <div class="col-md-12">
 <div class="card">
 <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
 <div class="card-body">
 <h4 class="card-title">Card title</h4>
 <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
 <a href="#" class="btn btn-primary waves-light" mdbRippleRadius>Button</a>
 </div>
 </div>
 </div>
 
 </mdb-slide>
 
</mdb-carousel>
<!--/.Carousel Wrapper-->

Keep adding sides like so, and see if it works :)

Thanks

p.s: Alternatively you could just try using an ordinary carousel and reposition the arrows...


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