'how to reset styles in vue carousel?

I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works

vue.jscarousel


Solution 1:[1]

vue-carousel has two properties that control the color of the dots:

  • paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.

  • paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.

For example:

<carousel paginationColor="gray" paginationActiveColor="red">

demo

Solution 2:[2]

Try this in your global CSS

.v-carousel__controls__item{
    color: #FFC400 !important;
}

Solution 3:[3]

There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.

    .VueCarousel-dot {
      position: relative;
      background-color: transparent !important;

      &::after {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border: 2px solid black;
        background-color: gray;
        position: absolute;
        top: 10px;
        left: 10px;
      }

      &--active::after {
        background-color: red;
      }
    }

This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tony19
Solution 2 Khoa Nguyen
Solution 3

Related Questions