Z Index on Carousel Arrrows

Visual Editor Help
, ,
1

Builder content link

Builder public api key
8cfe84fa67934f03912121c90884ab44

I’m trying to contain the carousel arrows within the carousel blocks and on top of the carousel images, see below:

Screen Shot 2022-11-15 at 11.58.02 AM
Screen Shot 2022-11-15 at 11.58.02 AM1070×924 54.2 KB

When I give the arrows a negative margin, the left arrow goes behind the image instead of in front. I tried to use a z-index on the image and on the arrow to force it to the front but it didn’t do anything.

2

Hi there!

You should be able to go into the Custom Code section (in the Data tab at the bottom, see Edit Content JS + CSS) and adjust the z-index of the arrow itself

I was able to add the below code and it ended up working and being layered on top of the carousel image

.slick-arrow {
    z-index: 8;
}