RRSlider 🚀
by Rootrifs - Robert Otto
Ein leichtgewichtiger und portabler Vanilla JavaScript Slider. Keine Abhängigkeiten, volle Kontrolle – direkt integrierbar in jedes Webprojekt.
Top Features
- Leichtgewichtig: Minimaler Footprint ohne externe Libs.
- Responsive: Passt sich jeder Displaygröße an.
- Interaktiv: Unterstützt Drag, Swipe & Fullscreen.
- Automatisierung: Autoplay mit anpassbarem Intervall.
Code-Beispiel
const mySlider = new RRSlider('#my-slider', {
autoPlay: false, // Autoplay an/aus
interval: 6000, // Intervall (nur bei autoPlay)
thumbnails: true, // Thumbnails an/aus
fullscreen: true, // Lightbox an/aus
draggable: true, // Maus-Drag an/aus
swipe: true, // Touch-Swipe an/aus
navigation: true, // Pfeile an/aus
duration: 600 // Dauer Slide-Wechsel
});
HTML Struktur
Einfach die folgende Struktur in dein HTML kopieren:
<div class="rr-slider" id="my-slider">
<div class="rrs-viewport">
<div class="rrs-track">
<div class="rrs-slide">Slide 1</div>
<div class="rrs-slide">Slide 2</div>
</div>
<!-- Navigation Buttons -->
<button class="rrs-prev">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<button class="rrs-next">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
</div>
</div>Konfiguration
autoPlay
Standard: false
Aktiviert den automatischen Slide-Wechsel.
interval
Standard: 5000
Zeit in ms zwischen den Wechseln (bei autoPlay).
duration
Standard: 500
Dauer der Slide-Animation in Millisekunden.
thumbnails
Standard: false
Erstellt automatisch eine Mini-Galerie unter dem Slider.
fullscreen
Standard: true
Aktiviert die Lightbox-Funktion bei Klick auf ein Bild.
draggable
Standard: true
Ermöglicht das Sliden per Maus-Drag auf dem Desktop.
swipe
Standard: true
Ermöglicht das Sliden per Wischgeste auf Touch-Geräten.
navigation
Standard: true
Zeigt die Vor- und Zurück-Pfeile im Slider an.