- 1
.carousel-indicators {
left: auto;
right: 0;
bottom: 0;
margin: 0;
background: #036bb8;
border-radius: 8px 0 0 0;
color: white;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#carousel:hover .carousel-indicators {
visibility: visible;
opacity: 1;
}
.carousel-indicators li {
background-color: transparent;
text-indent: unset;
text-align: center;
height: auto;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.carousel-indicators .active {
background-color: transparent;
color: rgba(255, 255, 255, 1);
}
.carousel-inner {
overflow: hidden;
}
document.addEventListener(‘DOMContentLoaded’, function() {
const indicators = document.querySelectorAll(‘#carousel .carousel-indicators li’);
indicators.forEach((indicator, index) => {
indicator.setAttribute(‘data-slide-to’, index);
});
});
Fonte CSTJ
