Customizing bootstrap carousel indicators on Vue MDB


Topic: Customizing bootstrap carousel indicators on Vue MDB

Jafet Cardenas asked 5 years ago

I'm trying to customize the carousel indicators on Vue, i'm trying the indicatorClass property but it doesn't work, or i'm not sure how to use it, standard css properties don't work.

Expected behavior Customization of carousel indicators

Actual behavior indicatorClass does not work

Resources (screenshots, code snippets etc.)

<template>

...

<mdb-carousel indicatorClass="indicador" :interval="5000" slide showControls top showIndicators>
    <mdb-carousel-item img src="https://mdbcdn.b-cdn.net/img/promo1.jpg" class="img-fluid" alt="PROMOCIONES" />
    <mdb-carousel-item img src="https://mdbcdn.b-cdn.net/img/promo2.jpg" class="img-fluid" alt="PROMOCIONES" />
    <mdb-carousel-item img src="https://mdbcdn.b-cdn.net/img/promo3.jpg" class="img-fluid" alt="PROMOCIONES" />
</mdb-carousel>
...

</template>

...

<style>

...

.indicador{
  background-color: fuchsia;
  width: 150px;
  border-radius: 0%;
}

...

</style>

Mikołaj Smoleński staff answered 5 years ago

Hi there,

You need to overwrite the default styles just by adding some wrapper classes to your example. It should be:

.carousel .carousel-indicators .indicador{
  background-color: fuchsia;
  width: 150px;
  border-radius: 0%;
}

I've made an example for you: https://mdbootstrap.com/snippets/vue/mikolaj-smolenski/962310

Best regards


Tenarius commented 4 years ago

Unfortunately that does not work. You can only change many styles in mdbvue after accessing the DOM with mounted (). This is very annoying. And by the way, the mdb snippets havent worked for some time ...


Mikołaj Smoleński staff commented 4 years ago

In the latest carousel component it should be:

.carousel .carousel-indicators li { background-color: fuchsia; width: 150px; border-radius: 0%; }

Best regards


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: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.6.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No