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 setindicator
De vormgeving van de setindicatorcontainer wordt beheerd met de volgende CSS-klassenkiezer:
.s7carouselviewer .s7setindicator
mode="numeric" komt overeen met de numerieke bedrijfsmodus; 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 kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende miniatuurtoestanden. Met name: state="selected" overeenstemt met het huidige element in de reeks; 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;
}