Z Index on Carousel Arrrows

Builder content link

Builder public api key

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

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.

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;