Product Images' active slide dot customization

2020

July

{"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/product-images-active-slide-dot-customization-0.png"}}

A new CSS Handle (swiperBullet--active) was added to the Product Images block(from the Store Components app), enabling the customization of the active slide dot.

This handle is extremely useful for scenarios where the Product Images block is used to build a slider component, such as a Carousel.

The slider active dot represents the slide currently being hovered on by users.

{"base64":" ","img":{"width":804,"height":486,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":335662,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/product-images-active-slide-dot-customization-1.png"}}