Vorige dia previous-slide

Als u deze knop selecteert, wordt de vorige dia in de carrouselset hersteld. Deze knop wordt niet weergegeven op aanraakapparaten. U kunt deze knop vergroten, verkleinen, verkleinen en plaatsen met CSS.

CSS-eigenschappen van het hoofdviewergebied

De vormgeving van de knop wordt bepaald door de volgende CSS-klassenkiezer:

.s7carouselviewer .s7panleftbutton

CSS-eigenschap
Beschrijving
top
De positie boven aan de viewerrand.
right
Positie rechts van de viewerrand.
left
Positie links van de viewerrand.
bottom
Positie onder aan de viewerrand.
width
Breedte van de knop.
height
Hoogte van de knop.
achtergrondafbeelding
De afbeelding die voor een bepaalde knopstatus wordt weergegeven.
background-position

Positie binnen illustratie-sprite, als CSS-sprites worden gebruikt.

Zie ook CSS-sprites.

cursor
Cursortype.
NOTE
Deze knop ondersteunt de state kenmerkenkiezer, die kan worden gebruikt om verschillende skins toe te passen op verschillende knoptoestanden.

De knopinfo kan worden gelokaliseerd. Zie Lokalisatie van gebruikersinterface-elementen voor meer informatie .

Stel dat u een vorige diaknop wilt instellen van 60 x 60 pixels. U wilt dat de achtergrondafbeelding tien pixels van de linkerviewerrand en verticaal gecentreerd wordt geplaatst. En u wilt dat er een andere afbeelding wordt weergegeven voor elk van de vier verschillende knoptoestanden.

.s7carouselviewer .s7panleftbutton {
 bottom: 50%;
 left: 10px;
 background-size:60px;
 cursor: pointer;
 }
.s7carouselviewer.s7mouseinput .s7panleftbutton {
 width:60px;
 height:60px;
 margin-bottom: -20px;
}
.s7carouselviewer.s7mouseinput .s7panleftbutton[state]  {
    background-image: url(../../viewers/s7viewers/html5/images/v2/CarouselDotsLeftButton_dark_sprite.png);
}

.s7carouselviewer.s7mouseinput .s7panleftbutton[state='up'] { background-position: -0px -60px;  }
.s7carouselviewer.s7mouseinput .s7panleftbutton[state='over'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panleftbutton[state='down'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panleftbutton[state='disabled'] { background-position: -0px -60px; }
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8