How to change product flicky dots to lines on my website?

[Luxurymrkt]

Hi All,

im trying to change the product dots under images to lines like picture below

my site is https://luxurymrkt.com

[Shop_Lovers]

Hi,

Add below CSS in theme.css file

.flickity-page-dots .dot.is-selected {
    width: 20px !important;
    height: 3px !important;
}
.flickity-page-dots .dot {
    width: 20px !important;
    height: 3px !important;
    border-radius: 0 !important;
}

Thanks

Hit Like and Accept as Solution if it helps you

[Luxurymrkt]

I wanted them full width so changed the sizing

only thing is it goes past the left padding

also if there’s more then 4 pics shows lines under the original. Possible to make it max 4 lines and if 5th pic it just goes back to beginning line? Thanks