How to add Slideshow Dots In Responsive Theme

[MyMawduh]

As you can see in the picture below I have numbers to move slideshow pictures on this theme.
Am currently using Sense version 9.0.0.

I would like to remove the numbers and add Auto Rotate slides and show slid indicator slides instead of the numbers. I just don’t think it looks good and also is open to any suggestions you guys have. please let me know if I can add some kinda code to fix this issue. Thank you.

www.mymawduh.com

[Alok_Kasgar]

Hi @MyMawduh
No any coding required here.

I hope this solution will works. Please follow below steps

1. Go to Online Store

2. Go to theme customize option

3. Click slider section and change style counters to Dots that’s it See below SS

[MyMawduh]

Okay, thats good. but now it still shows below the image. can it be included with the picture?

[Alok_Kasgar]

You can add CSS code for this. I hope this solution will works. Please follow below steps

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above tag

@media screen and (min-width: 750px){ .slideshow__controls { margin-top: -45px; } }

[MyMawduh]

it works beautifully. thank you, Alok.

[MyMawduh]

Can we change the color to white?

[Alok_Kasgar]

@MyMawduh Your welcome

For white color use below code:

@media screen and (min-width: 750px){ .slideshow__controls { margin-top: -45px; z-index: 9999; } .slider-counter__link--dots .dot { background-color: #fff!important; } .slider-counter__link--active.slider-counter__link--dots .dot{ border:1px solid #fff!important; } }

[Alok_Kasgar]

Please use 2 instead of 9999 z-index value

like as: z-index: 2;

[MyMawduh]

It works perfectly, and it looks way better. thank you so much. great help

[Chirag_Ailani]

But after this I encounter a new problem that is when I’m opening the hamburger menu in the mobile the three dots are overlapping.

[Dale_Van_Den_He]

That solves the problem for the desktop view of the three dots, but for the cell phone it is still the same?

[Dale_Van_Den_He]

Yes but only for the desktop, if you go to the cell phone View the three dots are still below the image.

[Dale_Van_Den_He]

This only affects the desktop version, the three dots still show on the cell phone.

[Wesmorbeauty]

Is there a similar code for the mobile version of the Sense Slideshow so it isn’t positioned underneath it

[Anjalilohiya018]

Hi, can you please share the code for mobile

[tranquilweaves]

Did you find the code to sort this for mobile? I also want to do the same but can’t.

[NutriAura]

guys, for the mobile, you should do the same thing but remove @media screen and (min-width: 750px){

The code should be :

.slideshow__controls { margin-top: -45px; z-index: 2; } .slider-counter__link--dots .dot { background-color: #ffffff!important; } .slider-counter__link--active.slider-counter__link--dots .dot{ border:1px solid #ffffff!important; }