Set indicator set-indicator
Set indicator is a series of dots rendered on top of swatches when a viewer is used on a touch device. The dots help users to navigate through pages of thumbnails when scroll buttons are not available.
CSS properties of the set indicator
The appearance of the set indicator container is controlled with the following CSS class selector:
.s7zoomviewer .s7setindicator
CSS property
Description
background-color
The background color in hexadecimal format of the set indicator.
Example - To create a set indicator with a white background:
.s7zoomviewer .s7setindicator {
background-color: #FFFFFF;
}
The appearance of an individual set indicator dot is controlled with the CSS class selector:
.s7zoomviewer .s7setindicator .s7dot
CSS property
Description
width
Width of the set indicator dot.
height
Height of the set indicator dot.
margin-left
Left margin in pixels.
margin-top
Top margin in pixels.
margin-right
Right margin in pixels.
margin-bottom
Bottom margin in pixels.
border-radius
Border radius in pixels.
background-color
Background color in hexadecimal format.
NOTE
Set indicator dot supports the
state attribute selector, which can be used to apply different skins to different thumbnail states. In particular, state="selected" corresponds to the current page of thumbnails, state="unselected" corresponds to the default dot state.Example - To create a set indicator dot to be 15 x 15 pixels, with 2 pixels horizontal margin, 5 pixels top margin, 1 pixel bottom margin, 12 pixels radius, #D5D3D3 default color, and #939393 active color:
.s7zoomviewer .s7setindicator .s7dot {
width:15px;
height:15px;
margin-left:2px;
margin-top:5px;
margin-right:2px;
margin-bottom:1px;
border-radius:12px;
background-color:#D5D3D3;
}
.s7zoomviewer .s7setindicator .s7dot[state="selected"] {
background-color:#939393;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8