Topic: MDB Angular Carousel of Cards
- Slide by only one card at a time instead of three.
- Display the arrows at the top, but not the dots at the bottom.
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...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No