How to remove Slideshow Pagination on Dawn Theme

Retired Boards Appdev Store Design
1

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.

2 Likes
2

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

1 Like
3

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

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

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

1 Like
5

@NathaliaChua The 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.

6

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

1 Like
7

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

Screenshot_4.jpg
Screenshot_4.jpg331Ă—576 24 KB

8

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

9

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

10

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.

11

Nevermind it didn’t work…

12

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

13

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

f.png
f.png1255Ă—420 29 KB

14

Respect mate now work very well this code,

have a nice day

15

Wow! It was a great and easy solution.

16

Will this code be overwritten if the theme is updated?

17

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.

18

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?

19

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! :slightly_smiling_face:

20

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