How can I customize pagination with showing progress rate on Dawn theme?

[winggor]

Hi all

I am using Shopify Dawn v 15.0.2 and want to change the pagination style of the image slideshow from dots to lines/bars just like this,each line will show the progress rate of the current image showing by highlight the line 

This is what I want it to look like:

and there is a reference site: https://satisfyrunning.com/

Any help would be amazing, thank you!

[Dawood_Mirza_]

Hi @winggor 

You can achieve a similar look like this by adding custom css

.slider-counter__link--dots .dot {
  width: 50px !important;
  height: 2px !important;
  border-radius: 0 !important;
}

Go to your online store > themes > current active theme > customize > click slideshow section> in rightside scroll down you can see place to add custom css> paste the above code. Screenshot attached for reference

I hope your issue will fix by this solution

If you need further assistance, feel free to reach out!

Regards,
Dawood