Customize image carousel arrows position and color

Arrows Position

If you want to Image Carousel arrows to be inside the image area you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.flickity-prev-next-button.previous { left: 30px !important; }
.flickity-prev-next-button.next { right: 30px !important; }

*You can change the position (left and right) values depending on your needs.

Arrows Color

You can choose between Default (Dark) and Light colors for the dots and arrows color of the image carousel from:

  • WPBakery: The Advanced tab in the Image Carousel Settings then by choosing the Dots style (“Default (dark)” or “Light”).
  • Elementor: The Style tab in the Image Carousel Settings, then by choosing the Dots style (“Default (dark)” or “Light”).

However, if you want to customize the arrow icons color via css you can add this code snippet into Theme options > Layout > Advanced > Custom css:

.pix-slider-dots path.arrow { fill: #000000 !important; }
.pix-slider-dots .flickity-button { border: 2px solid #000000 !important; }

*You can change the fill and border values depending on your needs.

pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts