Fix carousel dots overlapping thumbnails on Product page.

[Ubersmake]

What?

Things get interesting on the product page image thumbnail carousel when there are a lot of images on that product.

Specifically, when there are more than 22 images the carousel navigation dots will overlap with the image thumbnails.

The way margins are set up, with a window wide enough that Cornerstone will no longer expand out, there will be up to 17 navigation dots per row. These numbers are lower on a narrower view. Using Chrome, this is reduced to 11.

This fix is only for making sure navigation dots don't overlap thumbnail images. The fix also increases the space between the thumbnails and the dots. Only navigation dots on the product page are affected. Carousel navigation on other pages, like the home page, is not.

As an aside, navigation with multiple rows will always seem weird, and the only well-designed solution may be a scroll bar with a variable-width handle, which Slick Carousel (which Cornerstone uses) does not implement.

Tickets / Documentation

• STRF-5323

Screenshots

Product Pages Before:

Product Pages After:

Narrow Product Page After:

[bigbot]

Autotagging @bigcommerce/storefront-team @davidchin