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 use the code snippet example below and add it 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; }
.pix-slider-dots .flickity-button { background-color: #ffffff !important; opacity: 1 !important }*You can change the fill, border and background color values depending on your needs.
