… jedoch mit einer kleinen Macke.
Generell bin ich sehr begeistert von Swiper und setze diesen auch sehr gerne und oft ein. Er ist auch in eigenen Plugins schnell eingebunden und einsatzbereit, unkompliziert, einfach zu anzupassen, mobil- und touchfreundlich.
Bei einem Projekt sollte ein OnePager mit WordPress umgesetzt werden. Die einzelnen Inhalte, also Posts und Pages, sollten als eine Art Galerie mit dem Swiper navigierbar gemacht werden. Der Grund hierfür war es Platz zu sparen und langes Nach-unten-Scrollen für den User zu verhindern. Statt dessen sollten die Unterseiten eines Menupunktes horizontal gescrollt werden können, die Hauptpunkte normal in vertikaler Richtung. Somit mussten auf einer Seite gleich mehrere Swiper mit unterschiedlichen Darstellungsoptionen eingebunden werden.
Strukturell soll das dann so aussehen:
- Seite 1
- Unterseite 1-1
- Unterseite 1-2
- Unterseite 1-3
- Seite 2
- Seite 3
- Unterseite 3-1
- Unterseite 3-2
und so weiter …
Soweit eigentlich kein Problem. Die Beispielseite von Swiper stellt ja auch mehrere Galerien auf einer Seite dar.
Also habe ich mein Theme (zum Einsatz kam hier das Sage-Theme) aufgesetzt, mir die Ausgabe auf einen OnePager mit Swiper zur Navigation gemünzt. Weiterhin hatte ich bei den unterschiedlichen Swipern, je nach gewähltem Template, noch zusätzliche Attribute hinterlegt um diese unterschiedlich steuern zu können (Anzahl einzelner Bilder je Swipe, Geschwindigkeiten, Start-Delay etc.).
Die beschriebene Einbindung laut Dokumentation funktioniert jedoch nicht mit mehreren Gallerien. Alle Swiper haben gleichzeitig „geswiped“, stellenweise wurden Einstellungen überschrieben.
Nach kurzer Prüfung habe ich dann festgestellt, dass die Beispielseite von Swiper jede Galerie als iFrame eingebunden hat. Eine einfache und schnelle Lösung, die zusätzlich in Verbindung mit Lazyload noch eine schnelle Ladezeit garantiert – aber nichts für mein Projekt 🙂
Mit dem folgenden Javascript konnte ich hierbei Abhilfe schaffen: Die vorhandenen Swiper werden in ein Array gelegt und können somit einzeln initiiert und gesteuert werden.
$swipers = jQuery('.swiper-container');
if($swipers.length) {
var $swiperArray = [];
$swipers.each(function(index) {
$swiper = jQuery(this);
$swiper.addClass('s' + index);
var swiperIntervall = 6000,
swiperLoop = true,
swiperAutoplayStopOnLast = false,
swiperFreeMode = false,
swiperSpeed = 800;
$swiperArray[index] = $swiper.swiper({
loop: swiperLoop,
autoplay: swiperIntervall,
autoplayStopOnLast: swiperAutoplayStopOnLast,
freeMode: swiperFreeMode,
speed: swiperSpeed,
nextButton: $swiper.find('.swiper-button-next'),
prevButton: $swiper.find('.swiper-button-prev'),
onInit: function() {
}
});
});
}