I want to add display arrows in slideshow

Store Design

Topic summary

A user seeks to add navigation arrows to their slideshow, similar to a reference screenshot they provided.

Initial Solution Offered:

  • A community member (centous) provided CSS code to display arrows with specific styling (white color, rounded background, 20px height)
  • The code targets .slider-button elements in the base.css file

Follow-up Request:

  • The user clarified they want arrows positioned at the center-left and center-right of the slideshow

Updated Solution:

  • Additional CSS was provided to:
    • Position controls at 45% from top
    • Make slideshow component relatively positioned
    • Absolutely position previous/next buttons on left/right sides
    • Adjust slider counter dots positioning

Current Status:

  • The user reports the solution is not working
  • Issue remains unresolved and awaiting further troubleshooting
Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

I want to add display arrows in slideshow Just like the below screenshot

Screenshot_20231006_153202_Chrome.jpg
Screenshot_20231006_153202_Chrome.jpg1080×2400 292 KB

my website like is www.swayur.com

2

Hi @swayurindia

This is David at SalesHunterThemes.

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

Hi Swayurindia,

Welcome to the Shopify community.

Do you want to show arrows like this screenshot?

techdignity_0-1696588771877.png
techdignity_0-1696588771877.png1460×584 520 KB

Then, please apply below CSS in your base.css file.

body .slider-button {   
    background: #000 !important;
    color: #fff !important;
    border-radius: 50% !important;
}
body .slider-button svg{   
    height: 20px !important;
}

Please apply this CSS and let me know if you have any other questions.

Please do not forget to accept the solutions :slightly_smiling_face:

Thanks!

4

I want the buttons to be displayed on center left and center right. I hope you have understood?

5

Hi @swayurindia

Please add below CSS that will work for you.

.slideshow__controls {
    position: absolute;
    width: 100%;
    top: 45%;
}
slideshow-component {
    position: relative;
}
button.slider-button.slider-button--prev {
    position: absolute;
    left: 0;
}
button.slider-button.slider-button--next {
    position: absolute;
    right: 0;
}
.slider-counter.slider-counter--dots {
    position: absolute;
    bottom: -260px;
}
6

IT IS NOT WORKING