Vue-awesome-swiper: how can change the color of pagination?

[951759534]

I attemp to chang it with css but fail

[F-loat]

.swiper-pagination-bullet-active {
  background-color: #000;
}

If not work add !important .

[951759534]

Changing the source code have solved this question

[F-loat]

I think changing the source code is not a good way. If there has a bug you could pull request. And if not, overlay the style.

[surmon-china]

23

Yes, because the scoped tag is used, the generated css will contain a random tag (attribute selector) to mark the scope of the effect, and the subcomponent will not be included in the range as the element of the host component, so it will not be applied, which is Vue implementation mechanism caused by the current vue component template has no alternative to ng2 like a variety of styles of application mechanism, so now can be used

Need to apply pagination style components, do not use scoped labels
Define the pagination style in the global public css
But the component itself should not be big and the difference between the big difference,
If there is a better way to follow, I will leave a message here.

[snowman]

If you are using CSS:

.swiper-pagination >>> .swiper-pagination-bullet {
    opacity: 1;
    border: white solid 1px;
    background-color: transparent;
}
.swiper-pagination >>> .swiper-pagination-bullet-active {
    background-color: white;
}

using sass:

.swiper-pagination ::v-deep
  .swiper-pagination-bullet
    opacity: 1
    border: white solid 1px
    background-color: transparent
  .swiper-pagination-bullet-active
    background-color: white

[adaalin29]

@unmem Thank you! It Works

[David-Sarif]

.swiper-pagination-bullet-active {
  background-color: #000;
}

If not work add !important .
TANKS!

[OscarVelandia]

If you are using CSS:

.swiper-pagination >>> .swiper-pagination-bullet {
    opacity: 1;
    border: white solid 1px;
    background-color: transparent;
}
.swiper-pagination >>> .swiper-pagination-bullet-active {
    background-color: white;
}

This works, but instead of use >>> I use just >

[Kursorr]

I'm using the v3.1.3 and this :

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}

.swiper-container-horizontal >>> .swiper-pagination >>> .swiper-pagination-bullet {
  opacity: 0.2;
  background: #FFF!important;
}
.swiper-container-horizontal >>> .swiper-pagination >>> .swiper-pagination-bullet-active {
  background: white!important;
  opacity: 1;
}

the first line is working, that allow me to fix the pagination where I want so it's perfect, but I can't change the background of the bullet and when this one is active.
Someone have an idea please ?