I want to add functioning arrows on top of slideshow images

lightwork
Tourist
16 0 2

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

 

 

 

 

 

 

 

 

 

 

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

 

Thank you!

Replies 4 (4)

Ritu-25
Shopify Partner
129 26 15

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 

If helpful then please Like and Accept Solution.
You can directly PM.
Email Me : nayakritu.2506@gmail.com
lightwork
Tourist
16 0 2

It didn't do anything unfortunately!

lightwork
Tourist
16 0 2

can you still help me with this?

lightwork
Tourist
16 0 2

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