Debut Theme | Replace Thumbnails with Dot Slider on Mobile

[dano3333]

Hey guys!

I want to replace my thumbnails on the product page with a dot slider that appears at the bottom of the product picture only on mobile view. I don't know if there is an easy solution to this but I couldn't figure it out if there is. 

How it currently looks like: 

How I'd want it to look like:

Please let me know if you have a clue on how to fix this! Shop URL: fitness-sleeves.myshopify.com PW: ohthau

Thanks in advance! 

[KetanKumar]

@dano3333 

you have dots object 

https://codepen.io/auromnia/pen/xxZoVoV 

[cygniz]

Where we have to place this code. I don't need previous and next option. Just slider dots.

[KetanKumar]

@cygniz 

yes can put to product page customization if you have able to code

[cygniz]

Yes, I have made some changes using code myself. Could you please help me with the steps here.  Like where exactly i have to place. We have to put this 3 codes in 3 different places. Am i correct.

[KetanKumar]

@cygniz 

yes that current it was different code customization 

[wasimaliawan]

Use this as attribute in the product images wrapper.

data-slick="{"dots": true}"