RRSlider 🚀

Ein leichtgewichtiger und portabler Vanilla JavaScript Slider, entwickelt von Rootrifs - Robert Otto. Keine Abhängigkeiten, volle Kontrolle.

Demo

Demo Seite

Features

• Leichtgewichtig: Minimaler Footprint ohne externe Abhängigkeiten.
• Responsive: Passt sich automatisch der Fenstergröße an.
• Autoplay: Optionale automatische Wiedergabe mit anpassbarem Intervall.
• Einfache Integration: Schnell einsatzbereit durch eine klare HTML-Struktur.

Nutzung

1. HTML Struktur

Verwende die folgende Struktur für deinen Slider:

<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 class="rrs-slide">Slide 3</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>

2. JavaScript Initialisierung

Binde die Library als Modul ein:

import RRSlider from './dist/rr-slider.js';

const slider = new RRSlider('#my-slider', {
        autoPlay: false,    // Autoplay an/aus
        interval: 6000,     // Interval an/aus (Nur relevant bei Autoplay an)
        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,      // 600ms duration Slide-Wechsel
});

Oder via klassischem Script-Tag (UMD):

<script src="dist/rr-slider.umd.cjs"></script>
<script>
    const slider = new RRSlider('#my-slider', {
        autoPlay: false
    });
</script>

Konfigurationsoptionen

Der RRSlider lässt sich über ein Options-Objekt individuell anpassen:

• autoPlay (Boolean): Standard false. Aktiviert den automatischen Slide-Wechsel.
• interval (Number): Standard 5000. Zeit in Millisekunden zwischen den Wechseln (nur bei aktivem autoPlay).
• duration (Number): Standard 500. Dauer der Slide-Animation in Millisekunden.
• thumbnails (Boolean): Standard false. Erstellt automatisch eine Mini-Galerie unter dem Slider.
• fullscreen (Boolean): Standard true. Aktiviert die Lightbox-Funktion (Vollbildansicht) bei Klick auf ein Bild.
• draggable (Boolean): Standard true. Ermöglicht das Sliden per Maus-Drag auf dem Desktop.
• swipe (Boolean): Standard true. Ermöglicht das Sliden per Wischgeste auf Touch-Geräten.
• navigation (Boolean): Standard true. Zeigt die Vor- und Zurück-Pfeile an.

Entwicklung

Für die lokale Entwicklung starte den Dev-Server:

npm run dev

Lizenz

Dieses Projekt steht unter der MIT-Lizenz.