CODEWITHSUNDEEP
vue.jscarousel
user5790
user5790

Reputation: 61

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

Upvotes: 0

Views: 1765

Answers (3)

crestinglight
crestinglight

Reputation: 331

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.

Upvotes: 0

Aida Shirvaniyan
Aida Shirvaniyan

Reputation: 11

Try this in your global CSS

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

Upvotes: 0

tony19
tony19

Reputation: 138536

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

Upvotes: 1

Related Questions