Show Menu
TOPICS×

Set indicator

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.
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.
Example - to set up 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.
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.
Example - to set up set indicator in dotted mode for desktop systems to be positioned 20 pixels from the bottom of the viewer. Unselected dots are black with 50% transparency, 15 x 15 pixels with 7 pixels rounded corners. Selected dots are black with 90% transparency, 18 x 18 pixels with 9 pixels rounded corners. Spacing between dots is 5 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; 
}