Topic: How to reduce mdb carousel indicators size ?

GuillaumeDgr premium asked 3 years 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 3 years 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


GuillaumeDgr premium answered 3 years ago


Here the result with your solution : enter image description here


Mikołaj Smoleński staff answered 3 years ago


You can change indicators size via css:

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

Keep coding,  Mikołaj from MDB



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: Premium
  • 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