Topic: Customizing bootstrap carousel indicators on Vue MDB
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="/img/promo1.jpg" class="img-fluid" alt="PROMOCIONES" />
<mdb-carousel-item img src="/img/promo2.jpg" class="img-fluid" alt="PROMOCIONES" />
<mdb-carousel-item img src="/img/promo3.jpg" class="img-fluid" alt="PROMOCIONES" />
</mdb-carousel>
...
</template>
...
<style>
...
.indicador{
background-color: fuchsia;
width: 150px;
border-radius: 0%;
}
...
</style>
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 free commented 3 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 3 years ago
In the latest carousel component it should be:
.carousel .carousel-indicators li {
background-color: fuchsia;
width: 150px;
border-radius: 0%;
}
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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