Vanilla Javascript Swipe – Wischen und Ziehen

Swipe – Galerie mit Wischen ohne jQuery

Eine automatisch ablaufende Galerie im Header der Seite finden wir auf unzähligen Webseiten. Auf großen Monitoren gibt es dann Pfeile oder Chevrons rechts und links, um den Benutzer aus eigenem Antrieb durch die Bilder navigieren zu lassen.

Die kleinen Monitore der mobilen Geräte geben dem Benutzer ein Swipe – Wischen mit dem Finger – zur Hand.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Swipe ohne jQuery

Fast immer kommen Galerien mit Swipe als Plugin für WordPress, jQuery steuert die Galerie, für Swipe kommt dann noch hammer.js hinzu. Eine Menge Overhead für eine kleine Geste.

Dabei hinkt Javascript schon lange nicht mehr hinter jQuery hinterher.

Für eine Galerie mit Swipe gibt es ein feines gut gepflegtes Script von lyfeyaj auf github: swipe.

swipe-4
swipe-3
swipe-2
swipe-1

Script von Github einbinden

swipe.min.js von swipe/build einbinden, rd. 8KB

Alternativer Ansatz

Ein input type="range"-Element dazu, das mit jedem Schritt ein Bild / Element weiter scrollt. Scrollen per CSS transformX.