Add left & right arrow overlays on top of my slideshow (Dawn theme)

[Multicoloruni]

Hi, I want to add left & right arrow overlays on top of my slideshow (Dawn theme)

And remove the paginations below. I've looked at ALL of the posted solutions and they're all outdated. Every suggested code i've tried is not working...

Thank you!

[binal_identix]

Hello @Multicoloruni ,

Please check this it might be helpful to you.

https://community.shopify.com/c/shopify-design/dawn-slideshow-add-arrow-overlays-amp-remove-paginati...

[Small_Task_Help]

Hi,

In the Slideshow Section, add the navigation arrow

Example of code

<div class="slideshow-navigation">
  <button class="slideshow-prev" aria-label="Previous Slide">
    &#10094; <!-- Left arrow character or custom SVG -->
  </button>
  <button class="slideshow-next" aria-label="Next Slide">
    &#10095; <!-- Right arrow character or custom SVG -->
  </button>
</div>

Add javascript functionality and use CSS for hiding pagination and give style to arrow

If you still need help you can contact us (details at signature)

[Multicoloruni]

Hi @Small_Task_Help thanks for this. but nothing seem to change when adding the code into de slideshow section. please see screenshot.

[Small_Task_Help]

Let us check your backend from our side. If you want please get in touch with us (details at signature)

[Vinsinfo]

@Multicoloruni Please follow below steps to overlays left & right arrow on slideshow and remove pagination counter. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Slideshow".

4. Then scroll down and paste the below code in the "Custom CSS" field and save changes.

.slideshow__controls {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: space-between !important;
}
.slider-counter {
    display: none !important;
}
.slider-button {
    background-color: #ffffff5e;
    width: 24px !important;
    height: 24px !important;
    margin: 0px 10px;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Multicoloruni]

Thank you so much for this @Vinsinfo , however when applying the code, the dots from the bottom disappear but the arrows appear as little squares which are not clickable. please see attached screenshot. i also tried changing the color code so that they would be a bit more visible but this doesn't seem to work either. do you think it can be fixed? thanks so much in advance.

[Vinsinfo]

@Multicoloruni Please add the code and share your store URL, we will check insight and share you the solution.

[Multicoloruni]

Hi again @Vinsinfo, thank you, here's the website:

2d6aad-4.myshopify.com

dragon

[Vinsinfo · Accepted solution]

@Multicoloruni Please replace the code with below code. Let me know whether it works for you.

.slideshow__controls {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    justify-content: space-between !important;
}
.slider-counter {
    display: none !important;
}
.slider-button {
    background-color: #ffffff5e;
    width: 24px !important;
    height: 24px !important;
    margin: 0px 10px;
    z-index: 10;
}
.slider-button svg{
    display: block !important;
}

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Multicoloruni]

Wow, this is awesome!!! Thank you so much @Vinsinfo it's exactly what I had in mind! Thank you!!!