Smooth Slider

Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7
Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7
Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7
Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7
Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7
Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7
Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7
Beispieltext 1Beispieltext 2Beispieltext 3Beispieltext 4Beispieltext 5Beispieltext 6Beispieltext 7

Smooth Slider für Elementor

Der hochperformante Marquee-Slider ohne Jumping. Perfekt für Logo-Showcases, Partner-Slider, News-Ticker und überall dort, wo endlos scrollende Inhalte gebraucht werden.

🎯 Das Problem mit herkömmlichen Slidern

Die meisten Marquee-Plugins nutzen prozentuale CSS-Animationen (translateX(-50%)). Das funktioniert mathematisch nicht korrekt, wenn ein Gap zwischen den Elementen existiert. Das Ergebnis: Ein sichtbarer Sprung am Ende jedes Loops.

Smooth Slider löst dieses Problem durch dynamische, pixel-basierte Keyframes. JavaScript berechnet die exakte Distanz (Content-Breite + Gap) und generiert perfekte Animationen – auf jedem Gerät, bei jeder Bildschirmgröße.

4
Richtungen
50+
Einstellungen
~8KB
JavaScript
60
FPS Animation
0
Dependencies
100%
DSGVO

✨ Alle Features im Detail

↔️

4 Richtungen

Vollständige Kontrolle über die Scroll-Richtung.

• Links (Standard)
• Rechts
• Nach oben
• Nach unten

🖼️

Inhaltstypen

Flexibel einsetzbar für verschiedene Inhalte.

• Bilder mit individueller Breite
• Text mit voller Typografie-Kontrolle
• Links mit target/nofollow
• Lightbox mit Galerie-Navigation

🎨

Edge-Fade Effekte

Professionelle Ausblendung an den Rändern.

• Transparent (CSS Mask)
• Custom Gradient (2 Farben)
• Blur (Weichzeichner)
• Größe individuell einstellbar

✋

Hover-Effekte

5 kombinierbare Effekte für Interaktivität.

• Zoom (Skalierung einstellbar)
• Schatten (Box-Shadow)
• Rotation (Winkel einstellbar)
• 3D-Kippen (Intensität einstellbar)
• Deckkraft-Änderung

🎬

Animationen

Eingangs-Animationen und Timing-Presets.

• 6 Timing-Funktionen (Linear, Ease, Bounce…)
• 5 Eingangs-Animationen
• Dauer individuell einstellbar
• Pause bei Hover
• Richtungsumkehr bei Hover

📑

Mehrere Zeilen

Bis zu 4 parallele Slider-Zeilen.

• 2-4 Zeilen einstellbar
• Abwechselnde Richtung
• Geschwindigkeits-Variation
• Parallax-Effekt
• Zeilen-Abstand einstellbar

⚙️

Separator

Trenner zwischen den Elementen.

• Text/Symbol (z.B. • | ★)
• Icon (Font Awesome)
• Bild
• Linie (Breite/Höhe einstellbar)
• Farbe & Größe anpassbar

🔍

Lightbox

Integrierte Vollbild-Ansicht für Bilder.

• Vor/Zurück-Navigation
• Keyboard-Steuerung (← →)
• Touch-Swipe auf Mobile
• Bild-Counter (1/7)
• Caption-Unterstützung

⚡ Performance & Technologie

Smooth Slider wurde von Grund auf für maximale Performance entwickelt. Keine Kompromisse.

GPU-Beschleunigung

• translate3d für Hardware-Rendering
• will-change: transform
• backface-visibility: hidden
• Composite Layer Optimierung

Bildoptimierung

• Native Lazy Loading
• decoding=“async“
• srcset für responsive Bilder
• WebP-Unterstützung

Ressourcen-Sparen

• IntersectionObserver für Viewport-Pause
• matchMedia für Orientierung
• Kein Resize bei Adressleisten-Änderung
• Kein jQuery (~90KB gespart)

Core Web Vitals

• Kein Layout-Shift (CLS: 0)
• Schnelles LCP durch Lazy Load
• Minimale JavaScript-Ausführung
• Async/Defer Loading

📋 Technische Spezifikationen

Eigenschaft	Details
JavaScript	Vanilla ES6+, ~8KB (minified), keine Dependencies
CSS	~10KB (minified), CSS Custom Properties, keine Präprozessoren
Animation	Dynamische @keyframes, pixel-basiert, requestAnimationFrame
Browser-Support	Chrome 60+, Firefox 55+, Safari 12+, Edge 79+ (kein IE)
WordPress	5.0+ erforderlich, getestet bis 6.7
Elementor	3.0+ erforderlich (Free oder Pro)
PHP	7.4+ erforderlich, 8.0+ empfohlen
Internationalisierung	Vollständig übersetzbar, POT-Datei enthalten

♿ Accessibility (WCAG 2.1)

Semantik

• role="marquee" für Screenreader
• aria-label für Beschreibung
• aria-hidden für Duplikate

Keyboard

• Tab-Navigation möglich
• Leertaste: Pause/Play
• Pfeiltasten: Richtung ändern
• ESC: Lightbox schließen

Reduced Motion

• prefers-reduced-motion Support
• Animation wird vollständig deaktiviert
• Statische Darstellung als Fallback

🔒 Sicherheit & Datenschutz

Smooth Slider wurde nach WordPress Coding Standards entwickelt und ist vollständig DSGVO-konform.

Keine externen Verbindungen

Keine API-Calls, keine CDNs, keine Fonts von extern. Alles lokal.

Keine Cookies

Smooth Slider setzt keine Cookies und speichert keine Nutzerdaten.

Vollständiges Escaping

Alle Ausgaben werden mit esc_attr(), esc_html(), esc_url() escaped.

💡 Anwendungsfälle

🏢
Logo-Slider
🤝
Partner-Showcase
💬
Testimonials
📰
News-Ticker
🏆
Awards & Zertifikate
🛍️
Produkt-Showcase
👥
Team-Slider
🖼️
Galerie mit Lightbox
⭐
Social Proof
📢
Ankündigungen

🎛️ Elementor Controls Übersicht

Tab	Sektionen	Anzahl Controls
Inhalt	Inhalt, Einstellungen, Separator, Mehrere Zeilen, Effekte	25+
Style	Container, Rand-Ausblendung, Elemente, Hover-Effekte	20+
Erweitert	Lazy Loading, Viewport Pause, WebP/srcset	5+