Documentation Dynamic Media Viewers Reference Guide

Set indicator

Last update: September 14, 2021

CREATED FOR:

Developer
User

Set indicator is a series of dots rendered at the bottom of the viewer. It shows the current position within the set.

CSS properties of the set indicator

The appearance of the set indicator container is controlled with the following CSS class selector:

.s7carouselviewer .s7setindicator

CSS property	Description
background-color	The background color in hexadecimal format of the set indicator.

NOTE

Set indicator supports the mode attribute selector, which you can use to apply different styles for dotted and numeric operation modes. In particular, mode="numeric" corresponds to the numeric operation mode; mode="dotted" corresponds to the default dot state.

As an example, suppose you want to set up a set indicator with a white background:

.s7carouselviewer .s7setindicator {
 background-color: #FFFFFF;
}

The appearance of an individual set indicator dot is controlled with the CSS class selector. It applies to items both in dotted and numeric operation modes.

.s7carouselviewer .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.
font-family	Name of font.
font-size	Size of font.
color	Color of font.
vertical-align	Vertical alignment of the banner index.
line-height	Text height for the banner index.

NOTE

Set indicator items support the state attribute selector, which can be used to apply different skins to different thumbnail states. In particular, state="selected" corresponds to the current element in the set; state="unselected" corresponds to the default item state.

As an example, suppose you want to set up a set indicator in dotted mode for desktop systems. You want it to be positioned 20 pixels from the bottom of the viewer. And, you want unselected dots to be black with 50% transparency, 15 x 15 pixels with seven pixels rounded corners. Selected dots are black with 90% transparency, 18 x 18 pixels with nine pixels rounded corners. Spacing between dots is five pixels.

.s7carouselviewer.s7mouseinput .s7setindicator {
 bottom: 20px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{
 width:15px;
 height:15px;
 margin-left:2.5px;
 margin-right:2.5px;
 margin-top:2.5px;
 margin-bottom:2.5px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {
 width:18px;
 height:18px;
 background-color: #000000;
 opacity: 0.9;
 border-radius:9px;
}
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {
 width:15px;
 height:15px;
 background-color: #000000;
 opacity: 0.5;
 border-radius:7px;
}

recommendation-more-help