I want to add functioning arrows on top of slideshow images

[lightwork]

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:

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

Thank you!

[Ritu-25]

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 

[lightwork]

It didn't do anything unfortunately!

[lightwork]

can you still help me with this?

[lightwork]

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