Set indicator 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
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
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;
}