Dawn Slideshow - Add Arrow Overlays & Remove Paginations

[MMO1]

Hi, I want to add left & right arrow overlays on top of my slideshow (Dawn theme)

And remove the paginations below. I've looked at ALL of the posted solutions and they're all outdated.

Thank you!

[dbuglab]

Hi @MMO1 

Can you please provide your Store URL and Password too?

With Regards,
Dbuglab

[MMO1]

https://6f7a0b.myshopify.com/

gawbeu

[dbuglab]

@MMO1 

Please follow these Steps:

1) Go to Online Store
2) Edit Code
3) Please find theme.liquid file
4) Add the following code above </head> tag

<style>
.slider-counter.slider-counter--dots {
display: none !important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
display: none !important;
}
button.slider-button.slider-button--prev {
display: inherit;
margin-right: 81% !important;
position: absolute;
margin-bottom: 40% !important;
background-color: #fff !important;
}
button.slider-button.slider-button--next {
display: inherit;
margin-left: 81% !important;
position: absolute;
margin-bottom: 40% !important;
background-color: #fff !important;
}
</style>

[MMO1]

Hi thank you for this,

I would like to make the white backgrounds completely transparent,

And also make the arrows bigger and bolder (not pixel hairline) + color it red.

Can you please help me add these customizations? Thank you!

[dbuglab]

@MMO1 
Replace old css which given by me with this one

<style>
.slider-counter.slider-counter--dots {
    display: none !important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
    display: none !important;
}
button.slider-button.slider-button--prev {
    display: inherit;
    margin-right: 81% !important;
    position: absolute;
    margin-bottom: 40% !important;
	color : red !important;
}
button.slider-button.slider-button--next {
    display: inherit;
    margin-left: 81% !important;
    position: absolute;
    margin-bottom: 40% !important;
	color : red !important;
}
.slider-button .icon {
    height: 2.6rem;
}
</style>

[MMO1]

Hi, thanks for this. But the arrows are super tiny and not centered vertically. Can you please help fix this?

[dbuglab]

@MMO1 

Did you added css?
Unable to see ant changes.

[MMO1]

Yes I added just now, I was using the customize store preview > custom CSS

[dbuglab]

Please use this css

.slider-button .icon {
    height: 2.6rem !important;
}

[MMO1]

Thank you, I added this. But it's not centered vertically, and it's not clickable (doesn't scroll to other page)

[dbuglab · Accepted solution]

Hi @MMO1 
replace all given css with new one

.slider-counter.slider-counter--dots {
    display: none !important;
}
button.slideshow__autoplay.slider-button.no-js-hidden {
    display: none !important;
}
button.slider-button.slider-button--prev {
    display: inherit;
    margin-right: 95% !important;
    position: absolute;
    margin-bottom: 42% !important;
	color : red !important;
}
button.slider-button.slider-button--next {
    display: inherit;
    margin-left: 95% !important;
    position: absolute;
    margin-bottom: 42% !important;
	color : red !important;
}
.slider-button .icon {
    height: 2.6rem !important;
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden.slideshow__controls--border-radius-mobile {
    z-index: 999 !important;
}
.slideshow.banner.banner--medium {
    min-height: 70vh;
}

[MMO1]

Thank you!

[anshuep]

Hi,

I tried this and it looks perfect. Is there a way to make the number slider also transparent.

[DFU98]

I tried this css but the arrows aren't clickable, Do they need JS to have that functionality?

[Jmweste23]

Hi,

I used this code for my slideshow and it works great on mobile but had one issue on desktop... The arrows don't work.

My slideshow is essentially a menu, and each slide is a clickable image. On desktop when you go to click the next or previous slide arrow it thinks you're clicking the slide image and will direct you to that slide link. It will not register the arrow click to go to the next slide.

Can you help with this?

[MMO1]

Would you mind helping me modify the slide heights as well?

https://community.shopify.com/c/shopify-design/dawn-slideshow-modify-slide-height/td-p/2211038

[dbuglab]

Hi @MMO1 

Please use this css.

.slideshow.banner.banner--medium {
    min-height: 100vh;
}