Multi-item carousel customized

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Multi-item carousel customized

IRoman pro asked 6 years ago

how can you not show 3 card in Multi-item carousel but for example  5 card  in slide? can i use in mdb-carousel not card but overlay? <mdb-carousel-item> <div class="col-md-4"> <div class="view overlay z-depth-1 mb-2">

Damian Gemza staff answered 6 years ago

Dear IRoman, If you want to change the default appearance of multi-item carousel, to display other items number than 3, please change .col-md-4 class in cards to your desired value, put your desired items number in mdb-carousel-item element, and add below css code to styles.scss global stylesheet: 
.carousel-multi-item .carousel-inner .carousel-item.active, .carousel-multi-item .carousel-item-next, .carousel-multi-item .carousel-item-prev {

    display: flex;

}
This will allow you to set as many items as you want in mdb-carousel-item element. About overlay cards - yes, why not? Just use below code: 
<!-- Card -->
<div class="card card-image mb-3" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">

    <!-- Content -->
    <div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
        <div>
            <h5 class="pink-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
            <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                Odit sed qui, dolorum!.</p>
            <a mdbBtn color="pink" class="waves-light" mdbWavesEffect><i class="fa fa-clone left"></i> View project</a>
        </div>
    </div>
    <!-- Content -->
</div>
<!-- Card -->

<!-- Card -->
<div class="card card-image mb-3" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(47).jpg');">

    <!-- Content -->
    <div class="text-white text-center d-flex align-items-center rgba-indigo-strong py-5 px-4">
        <div>
            <h5 class="orange-text"><i class="fa fa-desktop"></i> Software</h5>
            <h3 class="card-title pt-2"><strong>This is card title</strong></h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.
                Odit sed qui, dolorum!.</p>
            <a mdbBtn color="deep-orange" class="waves-light" mdbWavesEffect><i class="fa fa-clone left"></i> View project</a>
        </div>
    </div>
    <!-- Content -->
</div>
<!-- Card -->
Best Regards, Damian  

IRoman pro commented 6 years ago

Thank you dear Damian, with change .col-md-4 to .col-md-3 is ok. The problem: "put your desired item number into mdb-carousel-item element". Where exactly? I can not find anything in docu. Best Regards, Igor

IRoman pro commented 6 years ago

ok, I tried it, it works without it '"put your desired item number ', Thanks

IRoman pro commented 6 years ago

ok, I tried it, it works without it '"put your desired item number ', Thanks

Damian Gemza staff commented 6 years ago

This means: Add as many items into mdb-carousel-item as you want (remember, that the sum of -col-md-* has to be 12).

IRoman pro answered 6 years ago

Another question: can not show the .controls-top .btn-floating at the top ofmdb-carousel but left and right? < .... > Best Regards, Igor

Damian Gemza staff commented 6 years ago

I don't understand your question. Could you please describe it better?

IRoman pro commented 6 years ago

I mean in multi-item carousel there are two black buttons < > above for scrolling left and right. How can you place these buttons left and right of cards, as in any other carousel, Thank you

Arkadiusz Idzikowski staff commented 6 years ago

Unfortunately it is not possible to position those buttons differently. You would need to remove controls by setting input to false and add your own custom buttons.

IRoman pro commented 6 years ago

Hi,
but how do I do it exactly?
I use this:
<! - Carousel Wrapper ->
<mdb-carousel [isControls] = "true" class = "carousel-multi-item multi-animation" [type] = "'carousel-multi-item'" [animation] = "'slide'">
<! - First slide ->
<Mdb carousel-item>
<div class = "col-md-3">
<div class = "view overlay">
<img src = "{{featuredArtworks_0.fileAsDataUrl}}"
class = "img-fluid" alt = "First sample image"> <a>
<div class = "mask rgba-white-slight"> </ div>
</a>
</ Div>

<h4 class = "mb-2 mt-4 font-weight-bold"> {{featuredArtworks_0.title}} </ h4>

<p class = "dark-gray-text"> {{featuredArtworks_0.firstName}}
{{featuredArtworks_0.lastName}} </ p>
<a class="text-uppercase font-small font-weight-bard spacing"> Read
more </a>
<hr class = "mt-1" style = "max-width: 90px">
</ Div>

When I do it, control does not work

IRoman pro answered 6 years ago

Hi, but how do I do it exactly? I use this: <! - Carousel Wrapper -> <mdb-carousel [isControls] = "true" class = "carousel-multi-item multi-animation" [type] = "'carousel-multi-item'" [animation] = "'slide'"> <! - First slide -> <Mdb carousel-item> <div class = "col-md-3"> <div class = "view overlay"> <img src = "{{featuredArtworks_0.fileAsDataUrl}}" class = "img-fluid" alt = "First sample image"> <a> <div class = "mask rgba-white-slight"> </ div> </a> </ Div> <h4 class = "mb-2 mt-4 font-weight-bold"> {{featuredArtworks_0.title}} </ h4> <p class = "dark-gray-text"> {{featuredArtworks_0.firstName}} {{featuredArtworks_0.lastName}} </ p> <a class="text-uppercase font-small font-weight-bard spacing"> Read more </a> <hr class = "mt-1" style = "max-width: 90px"> </ Div> When I do it, control does not work

Arkadiusz Idzikowski staff answered 6 years ago

You need to set isControls input to false and add your own buttons with previousSlide and nextSlide methods. Here is an example: 
<!--Carousel Wrapper-->

<mdb-carousel #carousel [isControls]="false" [animation]="'slide'">

<!--First slide-->

<mdb-carousel-item>

<imgclass="d-block w-100"src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg"alt="First slide">

</mdb-carousel-item>

<!--/First slide-->

<!--Second slide-->

<mdb-carousel-item>

<imgclass="d-block w-100"src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg"alt="Second slide">

</mdb-carousel-item>

<!--/Second slide-->

<!--Third slide-->

<mdb-carousel-item>

<imgclass="d-block w-100"src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"alt="Third slide">

</mdb-carousel-item>

<!--/Third slide-->

</mdb-carousel>

<!--/.Carousel Wrapper-->

<button mdbBtn color="primary" (click)="carousel.previousSlide()">Previous</button>

<button mdbBtn color="primary" (click)="carousel.nextSlide()">Next</button>
Regards, Arek
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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: desctop
  • Browser: chrome
  • OS: linux
  • Provided sample code: No
  • Provided link: No
Tags
customized multi-item-carousel
Related topics
1
Multi item carousel multiple breakpoints
1
Multi item carousel with Indicators
1
Complete list and explanation of all variables in _custom-skin.scss
0
Carousel pause for onclick events inside carousel does not work with gestures
0
Multi-item carousel Not Responsive
About author
IRoman
Pro User
105Support score
8Questions 6Answers
0Snippets likes 0Snippets