Sempervivum
Erfahrenes Mitglied
Dies funktioniert wenn ich es an das Ende des Body stelle:
Das kann man dann noch etwas verschönern, indem man die bekannten Symbole verwendet und die Buttons innerhalb des Containers positioniert, so wie die Bullets. Aber versuche zunächst ob es so auch bei dir funktioniert.
Leider wirkt die Pause-Funktion erst, wenn die Animation beendet ist und die Play-Funktion mit Verzögerung.
Code:
<script>
// Slider bereit stellen
const slider = $z('.zp13slider-container');
// Slider wird initialisiert beim Laden des ersten Bildes
// daher muessen wir ebenfalls bis zu diesem Event warten
slider.find('li img').first().one("load", function () {
// Pause-Button erzeugen
const pauseBtn = $z('<button>Pause</button>');
// Beim Klick wird der Slider pausiert
pauseBtn.on('click', () => {
slider.flexslider("pause") //Pause slideshow
});
// Pause-Button zum Container des Slidders hinzu fuegen
slider.append($z(pauseBtn));
// Die selbe Prozedur fuer den Play-Button
const playBtn = $z('<button>Play</button>');
playBtn.on('click', () => {
slider.flexslider("play") //Continue slideshow
});
slider.append($z(playBtn));
});
</script>
Leider wirkt die Pause-Funktion erst, wenn die Animation beendet ist und die Play-Funktion mit Verzögerung.
Zuletzt bearbeitet: