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.

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.

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.

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.

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

Resources on adobe.com

Ecommerce Integrations Automated Onboarding Auto Form Fill Personalized Experiences Dynamic Media Digital Rights Management

On this page