How to remove Slideshow Pagination on Dawn Theme

[NathaliaChua]

Hi,

I have added a slideshow to homepage as a banner but as it automatically scrolls through the images I would like to remove the pagination / arrows / controls panel at the bottom of the slider.

Store URL - www.movinka.com.au

Advice appreciated thank you.

[Nick_Marketing]

Consider adding a store URL so that devs on the forum can look into the .CSS.

[Nick_Marketing · Accepted solution]

Try adding this code to the bottom of component-slideshow.css

.slideshow__controls.slider-buttons.no-js-hidden {
  display:none;
}

[NathaliaChua]

Hey @Nick_Marketing!

Thanks this removed the navigation but now the auto slide is gone and only manually switches to the next image with a swipe (which new visitors would not know to do).

Any advice here? I have updated on my website so you can see how it is currently with the above code is the css.

Thanks again

[Nick_Marketing]

@NathaliaChuaThe slider switches banners automatically on my end, no swipes required. Desktop and mobile. Maybe a cache issue.

In case the CSS rule provided does not work as expected, you can always remove it.

[NathaliaChua]

Yes it must have been a cache issue as it is working now. Thanks so much @Nick_Marketing !

[groundz]

Hi Nick,

Would you know how to do this to the Featured Collection section of the dawn theme? i don't want the pagination showing under the actual slider on mobile

[seismic]

Hey Nick! I'm having the same issue too, but unsure on where to paste the code?

[seismic]

Hey @Nick_Marketing  I'm having the same issue too, but unsure on where to paste the code?

[Exproarzana]

Wow! It was a great and easy solution.

[tom890]

Will this code be overwritten if the theme is updated?

[Riyanne23]

This only hides it on laptop not mobile. and if it can be revealed again if you accidentally swipe up on the section so it just looks glitchy.

[sajjad_bronoun]

Hi @Nick_Marketing I added this at the bottom of the component like you guided but the scroll dots are still there. And for me it is not a cache issue as I cleared cache, tested on incognito and also across other devices where the website previously wasn't opened. What can I do?

[TxDCV]

Coding is gibberish to me still... But I went to edit code, the sections folder, slideshow.liquid, and deleted lines 137-184 then clicked save. It got rid of the previous and next sliders on desktop and mobile.

[TxDCV]

Nevermind it didn't work....

[aion04]

same situation , didn't work... the code work just for slider banner ... for collection list or featured prod or multicoll didn't work , I try many methods but no working..

someone can help please ?

I use Dawn theme

[TxDCV]

Assets... component-slider.css change the display from FLEX to NONE

[aion04]

Respect mate now work very well this code,

have a nice day 

[Helper12345]

For those who still seek the answer for the Shopify Dawn Theme. 

Here's your solution:

First go to the active theme you're using (Dawn in my example).

> Click on the three dots > Click on "Edit code".

> Locate component.slider.css (you can easily find this in the search bar on the lefthand side on your screen).

> Scroll to line 315 until you found the following code: "

.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}

Found it? 

Fantastic!

Now let's change this code into the following:

.slider-buttons {
display: none;
align-items: center;
justify-content: center;
}

Click "update" or "save" in the righthand side of your screen, and enjoy! 🙂

[Farmasia]

The problem with that is that it removes the announcement bar too. Any solutions for that?

[nadezhda_ilieva]

Hello. Just copy the code in the custom CSS of the slideshow.