How to make faded edges in carousel?

How To
1

Hello guys,

I would like to know how can I do this effect bellow on the carousel:

imagem_2024-01-12_123607676
imagem_2024-01-12_1236076761587×190 79 KB

I managed to do this by placing a container above the carousel with the absolute position and mirroring the size so that it was placed exactly above the carousel, then I made a gradient overlay. But the problem is that now, when I click on the images, I don’t go to the product page as before.

2

You can do it with almost anything, let’s say those arrows, just add background semi-transparent and make the container of the arrows bigger to the right, the element needs to have a bigger z-index then the carousel.