Change the pagination bullets color on image slider

  • Resolved christinacatwoo

    (@christinacatwoo)


    1 year, 9 months ago

    I am adding css to change the arrow buttons and the pagination bullets color on image slider. I follow another post here to change the arrow color into white, but the pagination bullets are in black color now, I want to change it into white also. My code is like below:

    .swiper-button-next, .swiper-button-prev {
    color: white !important;
    background-image: none !important;
    }

    .swiper-pagination-bullets {
    color: rgba(255,255,255,0.5) !important;
    }

    .swiper-pagination-bullets-active {
    color: white !important;
    }

    The arrow color is correctly show in white but the bullets are black on active and grey in color when it is in-active. Did I get the css wrong? How can I change the color on bullets?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Alexis Pandaan

    (@alexius08)

    Hi @christinacatwoo ! During our tests, the code you provided didn’t turn the pagination bullets black. They remained in their default colors instead.

    We’ll consider adding options to customize the colors of the pagination bullets in a future version of the plugin. Meanwhile, you may use the following CSS snippet to customize the bullet colors:

    .ub_image_slider .swiper-pagination-bullet {
	background-color: #ffffff;
	opacity: 0.5;
}

.ub_image_slider .swiper-pagination-bullet-active {
	background-color: #ffffff;
	opacity: 1;
}

    Please let us know how it goes.

    Thread Starter christinacatwoo

    (@christinacatwoo)

    Thank you Alexis, it works!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change the pagination bullets color on image slider’ is closed to new replies.