I want to change the position of next n previous button on slideshow

[blinglittlethin]

i am using dawn theme currently, and i managed to hide the slideshow slider counter somehow by adding comment tag to it.

but i still want to shift these arrows (next/ prev) onto the slideshow image, maybe towards the center and outwards. please help. i have attached screenshot of my website and reference (from shein) of what i want

[GemPages]

Hello @blinglittlethin

You can follow these steps:

1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

[LitCommerce]

Hi @blinglittlethin ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.slideshow__controls {
	position: static !important;
}
.slideshow__controls .slider-counter {
	display: none !important;
}
.slideshow__controls .slider-button {
	position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #fff !important;
}
.slideshow__controls .slider-button.slider-button--prev {
	left: 0;
}
.slideshow__controls .slider-button.slider-button--next {
	right: 0;
}
.slideshow__controls .slider-button svg {
	height: 2rem !important;
}

Hope it helps!

[blinglittlethin]

Thanks, perfect!

[blinglittlethin]

hey, i realised that the code made the buttons non-functional somehow.

[LitCommerce]

Hi @blinglittlethin ,

Have you tried following my instructions, it should work fine

[blinglittlethin]

did exactly as mentioned, but it isn’t working

www.blinglittlething.com

anyhow, if you’re unable to find the missing part, it isn’t an issue for now, so no worries. i am really thankful for the help you did though

[LitCommerce]

Hi @blinglittlethin ,

Please add code:

slideshow-component.slider-mobile-gutter .slider-buttons {
    z-index: 9999;
}

it will work fine

[blinglittlethin]

hey thanks, works perfectly now.

one more thing if it’s not too much to ask, i’m trying to change button size for bigger screens, but i’m unable to get the code right, could you help?

[LitCommerce]

Hi @blinglittlethin ,

Please add code:

@media screen and (min-width: 990px) {
slideshow-component.slider-mobile-gutter .slider-buttons .icon {
    width: 30px !important;
    height: 30px !important;
}
}

you can resize it to your liking, it will work fine

[blinglittlethin]

thanks a lot