How can I make slideshow arrows a transparent overlay on images?

Store Design
1

I would like the “previous” and “next” arrows to be a transparent overlay on the image in my slideshow. Then when you click on the image (which is actually the overlay), you will simply make it move to the next image., Like in this website www.nicolaskern.com Please help me Dawn theme.

2

This is Squarespace website, not Shopify :wink:

3

I know, it is only an example

4

Hi @blo17 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

5

www.filippo-ragone.myshopify.com

Password: 23

6

Hi @blo17 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-slider.css->paste below code at the bottom of the file:
.slideshow__controls {
    display: block !important;
    opacity: 1 !important;
    position: static !important;
}

.slideshow__controls .slider-button {
    position: absolute;
    z-index: 9;
    height: 100% !important;
    width: 50% !important;
    top: 0;
    opacity: 0;
}

.slideshow__controls .slider-button--next {
    right: 0;
    left: auto;
}

.slideshow__controls .slider-counter {
    display: none;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

it works but now I can’t select the menu items because when I click it changes slide, is it perhaps the z-index?

8

Hi @blo17 ,

I have not seen this error. Can you take a picture of the error so I can see it?