Image's non-active dots customization [CSS Handle]

2020

August

{"base64":" ","img":{"width":105,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":951,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/images-non-active-dots-customization-css-handle-0.png"}}

Previously, there were no CSS handles to enable users to select and customize non-active dots in the product-images block (from Store Components app).

The non-active dot represents the image that is not currently being hovered on by users.

{"base64":" ","img":{"width":1490,"height":905,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":694082,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/images-non-active-dots-customization-css-handle-1.png"}}

In the image above only the first image dot, which was currently selected (or active), had both vtex-store-components-3-x-swiperBullet and vtex-store-components-3-x-swiperBullet--active CSS classes. The second image dot, which was not active, did not have any CSS class which basically means that users were not able to select it for customization.

Thanks to the new swiperBullet and swiperBullet--active CSS Handles, the image's non-active dots can now be selected and customized. For more on this, do not forget to access the Product Images block documentation and our documentation or Using CSS Handles for store customization.