Hi,
I am trying to remove the left and right navigation arrows on my image slideshow on my home page but keep the dots in the centre at the bottom.
Would anyone be open to helping? Thanks in advance!
Topic summary
A user seeks to remove left and right navigation arrows from their homepage image slideshow while keeping the bottom center dots.
Initial Attempts:
- Another community member suggested CSS code from a previous thread, but it didn’t work for the user’s setup.
- One responder requested more details via screenshot to identify the specific section.
Solution Found:
- Adding the CSS code
.slider-button { opacity: 0; }successfully hid the arrows. - The user placed the code in the
<head>section rather than the body to prevent arrows from briefly appearing during page load.
Status: Resolved. The custom CSS effectively removed the slideshow navigation arrows as intended.
1 Like
Hello there @atmos-art I suggest you have a look at the marked reply here https://community.shopify.com/c/shopify-design/how-to-remove-the-arrow-on-the-product-image-slideshow/m-p/2585168 and let me know if it works for you too!
Hi, I have tried both sets of code in that post but neither worked for me unfortunately.
Hi @atmos-art
Can you screenshot bigger or figure out detail which section you want to change?
Please add this code to Custom CSS of that slideshow section
.slider-button { opacity: 0; }
Hi this worked great! I added it to the section though as putting it in the body section caused the arrows to load and then disappear on the page when it loads. Thank you for your help!
1 Like