Indicator instellen set-indicator
De indicator Set is een reeks punten die onder aan de viewer worden weergegeven. De huidige positie in de set wordt weergegeven.
CSS eigenschappen van de vastgestelde indicator
De vormgeving van de setindicatorcontainer wordt beheerd met de volgende CSS-klassenkiezer:
.s7carouselviewer .s7setindicator
mode="numeric" komt met name overeen met de numerieke bewerkingsmodus; mode="dotted" komt overeen met de standaardpuntstatus.Stel dat u een setindicator met een witte achtergrond wilt instellen:
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
De vormgeving van een individuele set-indicator punt wordt bepaald door de CSS-klassenkiezer. De optie is van toepassing op items in zowel de modus Stippel als de modus Numeriek.
.s7carouselviewer .s7setindicator .s7dot
state , die kan worden gebruikt om verschillende skins toe te passen op verschillende miniatuurtoestanden. Met name state="selected" komt overeen met het huidige element in de set; state="unselected" komt overeen met de status van het standaarditem.Stel dat u een instellingsindicator wilt instellen in de stippelmodus voor desktopsystemen. U wilt dat het 20 pixels van de onderkant van de viewer verwijderd is. En niet-geselecteerde stippen moeten zwart zijn met 50% transparantie en 15 x 15 pixels met 7 pixels afgeronde hoeken. Geselecteerde stippen zijn zwart met 90% transparantie, 18 x 18 pixels met negen pixels afgeronde hoeken. De ruimte tussen stippen is vijf 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;
}