Nächste Folie next-slide
Durch Klicken auf die Schaltfläche Nächste Folie wird ein Benutzer zur nächsten Folie im Karussellset bewegt.
Diese Schaltfläche wird auf Touch-Geräten nicht angezeigt. Sie können diese Schaltfläche mithilfe von CSS skalieren, anpassen und positionieren.
CSS-Eigenschaften des Haupt-Viewer-Bereichs
Das Erscheinungsbild der Schaltfläche wird mit dem folgenden CSS-Klassenselektor gesteuert:
.s7carouselviewer .s7panrightbutton
Positionieren Sie sie innerhalb des Bildsets, wenn CSS-Sprites verwendet werden.
Siehe auch CSS Sprites-.
state-Attributauswahl, mit der verschiedene Skins auf verschiedene Schaltflächenzustände angewendet werden können.Die QuickInfo der Schaltfläche kann lokalisiert werden. Siehe Lokalisierung von Benutzeroberflächenelementen für weitere Informationen.
Angenommen, Sie möchten eine Schaltfläche für die vorherige Folie mit 60 x 60 Pixel einrichten. Die Schaltfläche soll zehn Pixel vom rechten Viewer-Rahmen entfernt und vertikal zentriert positioniert werden. Außerdem soll ein anderes Bild für jeden der vier verschiedenen Schaltflächenstatus angezeigt werden.
.s7carouselviewer .s7panrightbutton{
bottom: 50%;
right: 10px;
background-size:60px;
cursor: pointer;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton {
width:60px;
height:60px;
margin-bottom: -20px;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state] {
background-image: url(../../viewers/s7viewers/html5/images/v2/CarouselDotsRightButton_dark_sprite.png);
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='up'] { background-position: -0px -60px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='over'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='down'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='disabled'] { background-position: -0px -60px; }