How to reduce mdb carousel indicators size ?


Topic: How to reduce mdb carousel indicators size ?

GuillaumeDgr pro premium priority asked 4 months ago

Expected behavior Reduce carousel indicators size.

Actual behavior Big indicators.

Resources (screenshots, code snippets etc.)

    <!-- Carousel -->
    <mdb-carousel multi slide indicators :items="12">
      <template v-for="(expertise, i) in expertises" #[i+1]>
        <mdb-col :key="i" class="text-center">
          <img :src="expertise.img" alt="Expertise" height="120" />
          <h3 class="h3-responsive my-3">{{ expertise.tech }}</h3>
        </mdb-col>
      </template>
    </mdb-carousel>
    <!-- /Carousel -->

enter image description here


Mikołaj Smoleński staff answered 4 months ago

You can change indicators size via css:

.carousel .carousel-indicators li {
    width: .4rem;
    height: .4rem;
}

Keep coding,  Mikołaj from MDB


GuillaumeDgr pro premium priority answered 4 months ago

Here the result with your solution : enter image description here


Mikołaj Smoleński staff answered 4 months ago

It looks like an active element has changed size too. To fix it please add the following rule:

.carousel-indicators .active {
    width: .4rem;
    height: .4rem;
}

Keep coding,  Mikołaj from MDB


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB4 6.7.2
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No
Tags