I want to add functioning arrows on top of slideshow images

Store Design
1

I have removed the dots/number counter from below the slideshow with this code:

.slideshow__controls.slideshow__controls–top.slider-buttons.no-js-hidden {
display: none !important;
}

Now I would like to add white or translucent arrows on top of the slideshow images to the far right and far left. Here is an example from another website:

Screenshot 2024-02-22 182918.png
Screenshot 2024-02-22 182918.png1048×348 529 KB

I have the studio theme and my website is www.inspirelightwork.com

Thank you!

2

Hey @lightwork ,

Please add this CSS to the component-slideshow.css

#shopify-section-template--21536113230134__c8432bbd-72a7-4418-b202-d97baf948c7f .slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    /* display: none !important; */
}

.slider-counter.slider-counter--dots {
    display: none;
}
.slideshow__autoplay.slider-button.no-js-hidden {
    display: none;
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    position: absolute;
    top: 50%;
    border: none;
    width: 100%;
    z-index: 999999;
}
.slider-button .icon {
    height: 3.6rem;
    color: #fff;
}
.slider-button.slider-button--prev {
    position: absolute;
    left: 0px;
}
.slider-button.slider-button--next {
    right: 0;
    position: absolute;
}

Thanks,

Ritu

3

It didn’t do anything unfortunately!

4

is there a way to boost this? I still need help with this issue

5

can you still help me with this?