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 · Accepted solution]

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 · Accepted solution]

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

[Alok_Kasgar · Accepted solution]

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 </body> tag

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

[MyMawduh · Accepted solution]

it works beautifully. thank you, Alok.

[MyMawduh · Accepted solution]

Can we change the color to white?

[Alok_Kasgar · Accepted solution]

@MyMawduh Your welcome

For white color use below code:

<style>
@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;
}
}
</style>

[Alok_Kasgar · Accepted solution]

Please use 2 instead of 9999 z-index value

like as: z-index: 2;

[Alok_Kasgar · Accepted solution]

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 · Accepted solution]

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

[Alok_Kasgar · Accepted solution]

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 </body> tag

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

[MyMawduh · Accepted solution]

it works beautifully. thank you, Alok.

[MyMawduh · Accepted solution]

Can we change the color to white?

[Alok_Kasgar · Accepted solution]

@MyMawduh Your welcome

For white color use below code:

<style>
@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;
}
}
</style>

[Alok_Kasgar · Accepted solution]

Please use 2 instead of 9999 z-index value

like as: z-index: 2;

[MyMawduh · Accepted solution]

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]

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]

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]

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