Slow responding “dots” when switching images on mobile — CSS pagination

Shopify Discussion

Topic summary

Main issue: On mobile product pages, custom CSS turns the thumbnail slider into centered dot-style pagination, but the active dot updates ~1 second after the image changes.

Changes implemented (in base.css, max-width: 749px):

  • Repositioned thumbnail slider to centered absolute position.
  • Hid thumbnail images and navigation arrows.
  • Set each slide item to 10x10px; styled .thumbnail as circular dots (#ddd) and the current one via [aria-current] as #121212.

Current behavior: Visual design works as intended (centered dots, no arrows). The dot indicator lags behind the image change on mobile by about one second.

Goal/ask: Make the dots respond instantly to slider changes; open to CSS tweaks or alternative approaches without lag. Website: crepscity.com.

Status: No solution provided yet; request for suggestions remains open.

Summarized with AI on January 7. AI used: gpt-5.
1

Hi everyone,

I’ve added this CSS to my base.css to turn the mobile thumbnail slider into a centered dot‑style pagination:

@media (max-width: 749px) {
    .product .thumbnail-slider .thumbnail-list.slider {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
    }
    .product .thumbnail.global-media-settings img { display: none; }
    .product .thumbnail-list__item.slider__slide {
        width: 10px;
        height: 10px;
    }
    .product .thumbnail-list__item.slider__slide .thumbnail {
        border-radius: 50%;
        background: #ddd;
    }
    .product .thumbnail-list__item.slider__slide .thumbnail[aria-current] {
        background: #121212;
    }
    /* Hide thumbnail navigation arrows */
    .product .thumbnail-slider .slider-button {
        display: none !important;
    }
}

Visually it works great, the thumbnails are dots, they are centred in the middle, and arrows are hidden. However, when changing product images on mobile, the dot indicator updates about 1 second later than the image change. Is there a way to make these “dots” respond instantly when the slider changes?

Any suggestions on how to improve the responsiveness or an alternative approach that doesn’t lag would be hugely appreciated!

Thanks :blush:

Website: crepscity.com

1 Like
2

Any solution for this?

3

Hi,
As I have checked, it is normal for it to activate after the image stops scrolling.

4

Hi Dan, on other websites using this pagination style, the response occurs simultaneously with the image switch.

Example website: Chanel size 45 CC logo sneakers leather black / white

6

Hi MeshCode,

I’m not sure which file this script is meant to go in, so I added it to the theme editor’s main JS file. After inserting the code, it didn’t work as expected.

Instead of syncing the pagination with the image change, it actually made things worse — when I switch images, the pagination dots skip two at a time. The image and pagination are still not responding simultaneously.

Could you please explain in more detail where exactly this code should be added and which slider event it needs to hook into?