Mehrere Swiper Karusselle auf einer HTML-Seite darstellen

  • Hallo,

    bei dem Versuch mehrere Swiper Karusselle auf einer HTML-Seite darzustellen, tritt bei mir entweder der Fehler auf, dass beim Klick auf die Pfeile (Vor- und Zurück) entweder alle Karusselle reagieren oder eben gar keins. In einigen Foren habe ich Lösungen (z. B. unterschiedliche Benennung der Variablen, each(function())..., usw.) mit JavaScript und jQuery gefunden. Konnte diese aber leider nicht richtig umsetzen. Ich lade mal meinen Ansatz im nächsten Beitrag hoch.

  • Bei solchen Plugins besser auf die originale Doku bauen und nicht auf Anleitungen dritter. Tue ich das, funktioniert es problemlos:

    Bei dir war das Problem, dass Du die Pfeil-Buttons an der falschen Stelle eingefügt hast:

  • Jetzt habe ich mich scheinbar nun doch etwas zu früh gefreut.

    Das Problem ist zwar behoben, aber die Pfeile befinden sich jetzt im Bild/ Container und wenn ich die class "mySwiper" bzw. "mySwiper1" in den wrap(per) schreibe und die Pfeile aus dem swipe-container nehme, reagieren wieder alle Karuselle auf den Klick. Auch Margin und Padding bringen mich dabei nicht weiter.

  • Da musste ich jetzt auch ein wenig daran arbeiten ;)

    Der Container, den Swiper da benutzt, hat overflow:hidden; und wenn man versucht, die Pfeile herauszuschieben, verschwinden sie :)

    Daher musste ich sie aus dem Container heraus nehmen und die Elemente in der Initialisierung übergeben statt der Klassen.

    Und der .swiper-container verträgt es anscheinend nicht, wenn er ein Flexitem ist, was ich nicht verstehe. Daher musste ich die Pfeile absolut positionieren. Ich habe es zunächst mal für beide Slider getrennt gemacht. Wenn es mehr als zwei werden, empfiehlt es sich, das Ganze mit einer Schleife zu machen.

    Dieses funktioniert bei mir:

    Die Pfeile musst Du dann selbst ausgestalten.

  • PS: Ich habe jetzt auch die Pfeile von Swiper übernommen, indem ich das CSS kopiert habe:

  • Das ist ja mal überragend:)!

    Da hätten die von Swiper aber auch mal selbst drauf kommen können. Ich hatte zwischenzeitlich mal überlegt dann doch Slick zu nehmen, weil mich das so geärgert hat. Aber da kann ich unten nicht die Seitenzahl ausgeben. Umso schöner nun mit der "eierlegenden Wollmilchsau" weiterarbeiten zu können;).

    Besten Dank dafür! Vor allem die Mühe und Zeit, die Du investiert hast:) .