Swiper 5.2.1 als OWL Ersatz

relativ leichtes Carouselscript

Normaler Slider mit mehreren Bildern nebeneinander

Slider mit Text

Funktioniert richtig schlecht... Arrows ohne Funktion, zappelt zurück zu ertem Slide...

Überschrift Slide 1

Dieser Slider hat alle Slides in unterschiedlicher Höhe, da mehr oder weniger Summarytext. autoHeight:true ist gesetzt.
Daraufhin bleiben die PREV und NEXT im Slide, aber es verändert die Höhe, und zappelt damit rum. Scheint aber die beste Lösung zu sein.

Lesen

Überschrift Slide 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Lesen

Überschrift Slide 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper...

Lesen

AutoWidth, alle gleiche Höhen aber unterschiedliche Breiten

Das Item(.swiper-slide) muss style=width:xxxpx; haben sonst geht es nicht!

Vorteile:

  • Keine Abhängigkeiten, dafür selbst 136kb

Nachteile:

  • PREV und NEXT können nie außerhalb des Sliders sein! (OWL besser)
  • Man muss immer die Anzahl der Slides angeben! 'auto' erfordert die Angabe des width für jedes Slide(OWL besser)
  • Groß, 135kb minified
  • Keine eigenen Icons für PREV und NEXT im JS Call möglich, ala svg use:

Fazit:

  • Nicht so richtig das Wahre!
  • Swiper ist Scheisse! Die PREV Button können nicht ausserhalb sein, da overflow:hidden... Bei anderen ist das nicht so.

Quellen: