Elementor-Bildkarussell-Widget: Kostenloser Schieberegler mit Lightbox und Coverflow
Das Image Carousel Widget in Master Addons verwandelt eine WordPress Galerie in einen wischbaren Slider, und es ist kostenlos Sie wählen die Bilder aus, wählen aus, wie viele auf Desktop, Tablet und Telefon angezeigt werden, und fügen Autoplay, eine Lightbox und ein 3 D-Coverflow-Layout hinzu, wenn Sie eine jede Folie im Normal, Schwebe - und Aktivzustand stylen können, und die Pfeile, Punkte und Bildunterschriften folgen Ihrer Marke Es funktioniert für Portfolios, Produktaufnahmen, Hotel - und Immobilienführungen sowie Kundenlogos.
Erweiterte Layout- und Verhaltenskontrolle
Übernehmen Sie die volle Kontrolle darüber, wie Ihr Karussell aussieht und sich verhält Wählen Sie ein Karussell - oder Coverflow-Layout Stellen Sie Folien pro Spalte für gitterartige Anzeigen ein und definieren Sie, wie viele Folien Sie scrollen möchten Aktivieren Sie Funktionen wie Autoplay, Schleife, Center-Modus und sogar einen Grab Cursor für interaktives Ziehen Die Observer-Option stellt sicher, dass es innerhalb von Tabs oder Akkordeons perfekt funktioniert.
- Flexible Layouts: Erstellen Sie mehrreihige Gitter oder klassische horizontale Schieberegler mit voller Kontrolle über Spalten und Scrollen.
- Reibungslose Interaktionen: Stellen Sie die Geschwindigkeit der automatischen Wiedergabe und die Animationsgeschwindigkeit ein und aktivieren Sie die Pause im Mauszeiger für benutzerfreundliches Verhalten.
- Intelligente adaptive Funktionen: Verwenden Sie die automatische Höhe, um umständliche Leerräume zu vermeiden, und Observer, damit es in versteckten Containern funktioniert.
Stil jedes Teils, in jedem Staat
Machen Sie Ihr Karussell zu einem perfekten Teil Ihres Designs Stilieren Sie nicht nur die Bilder – Stil des Behälters für jedes Element Stellen Sie einzigartige Hintergründe, Ränder, Schatten und Polsterungen für Normal-, Hover- und Aktivzustände ein Passen Sie die Itemlücke und die Gesamtopazität an Mit diesem Detaillierungsgrad können Sie interaktive Karten erstellen, die aktive Folie hervorheben und bei der Interaktion der Benutzer klares visuelles Feedback geben.
- Interaktives Feedback: Entwerfen Sie unterschiedliche Hover-Effekte (wie einen Schattenlift oder einen Farbwechsel), um Besucher anzusprechen.
- Active Slide Highlight: Lassen Sie die aktuelle Mittelrutsche durch einen anderen Rand oder Hintergrund hervorstechen.
- Vollständige visuelle Kontrolle: Passen Sie den Randradius, den Kastenschatten und die Polsterung an, um eine perfekte Artikeleinrahmung zu gewährleisten.
Navigation & Integrierte Lightbox
Führen Sie Ihre Besucher richtig auf Ihrem Bildkarussell Entwerfen Sie elegante Pfeilnavigation mit benutzerdefinierten Symbolen, Farben, Hintergründen und Positionierung (Innen, Außen) Verstecken Sie sie auf dem Handy für einen saubereren Look Dann aktivieren Sie Ihre Galerie mit einer integrierten Lightbox Passen Sie das Vorschausymbol, die Überlagerung und die Beschriftungstypografie an Wählen Sie zwischen Fancybox und Elementor, um Bilder in einem schönen Vollbild-Anzeigeerlebnis zu öffnen.
- Benutzerdefinierte Navigationspfeile: Stilpfeile von Grund auf – ändern Farbe, Größe, Hintergrund und horizontaler Versatz.
- Mobil optimiert: Wählen Sie, ob Sie den Pfeil auf Mobilgeräten ausblenden möchten, und verlassen Sie sich auf Wischgesten, um ein natives Gefühl zu erzielen.
- Premium Lightbox: Bieten Sie eine vergrößerte Ansicht mit anpassbaren Symbolen und Überlagerungen und verwandeln Sie das Karussell in eine vollständige Galerie.
Elementor-Bildkarussell vs. Master-Addons-Bildkarussell
Beide Widgets sind kostenlos Die Version von Elementor reicht für einen Basis-Slider mit Untertiteln und Links Wählen Sie das Master Addons eins, wenn Sie ein Coverflow-Layout, Bildzeilen oder mehr Kontrolle über Navigation und Diastyling benötigen.
| Elementorbildkarussell | Master Addons Bildkarussell | |
|---|---|---|
| Preis | Kostenlos | Kostenlos |
| Folien pro Ansicht pro Gerät | Ja | Ja |
| Layouts | Gleiten oder verblassen | Karussell oder 3 D-Abdeckungsstrom |
| Mehrere Reihen | Nein | Ja, mit Folien pro Spalte |
| Navigation | Pfeile und Punkte | Pfeile, Punkte, dynamische Kugeln, Bruch, Fortschrittsbalken und Bildlaufleiste |
| Leuchtkasten | Elementor-lightbox | Fancybox oder Elementor, mit einem benutzerdefinierten Vorschausymbol und Overlay |
| Diastyling | Grundlegend | Normal, Hover - und Aktivzustände |
| Verknüpfen Sie jedes Bild mit einer URL | Ja | Nein, Bilder öffnen sich in der Lightbox |
So fügen Sie ein Bildkarussell in Elementor hinzu
Für einen längeren Walkthrough mit Screenshots lesen Sie So erstellen Sie ein Bildkarussell in Elementor.
- Installieren Sie das kostenlose Master Addons Plugin und bearbeiten Sie Ihre Seite mit Elementor.
- Durchsuchen Sie das Widget-Panel nach Image Carousel und ziehen Sie es in einen Container.
- Klicken Sie auf das Galeriefeld, wählen Sie Ihre Bilder aus und legen Sie die Bildauflösung fest.
- Stellen Sie ein, wie viele Folien pro Gerät angezeigt werden, und schalten Sie dann Autoplay, Loop und die Lightbox ein, wenn Sie diese wünschen.
- Wählen Sie Karussell oder Coverflow, gestalten Sie die Folien und Pfeile und veröffentlichen Sie.
Verwandte Karussells: Logo-Slider, Team Slider, Galerie-schieber (Pro) und die Blog Karussellmodus von widget.
Häufig gestellte Fragen für Bildkarussell
Was ist der Hauptvorteil gegenüber dem grundlegenden Image Carousel von Elementor?
Das kostenlose Image Carousel von Elementor verarbeitet einen einfachen Schieberegler gut: Untertitel, eine Lightbox, Autoplay und Folien pro Gerät Master Addons fügt ein 3 D-Coverflow-Layout, mehrreihige Gitter mit Dias pro Spalte, Bruch, Fortschrittsbalken - und Scrollbar-Navigation, eine Auswahl an Fancybox oder die Elementor-Lightbox mit einem benutzerdefinierten Vorschausymbol, Styling für normale, Hover - und aktive Dias sowie eine Observer-Option für Karussells in Tabs oder Akkordeons hinzu.
Wenn ich 'Auto Höhe' aktiviere, werden meine Bilder dann gestreckt oder beschnitten?
Nr. Auto Height passt die Höhe des gesamten Karussellbehälters an die höchste aktuell sichtbare Folie an Ihre Bilder behalten ihr Seitenverhältnis basierend auf Ihren anderen Einstellungen (wie “Bildgröße”) bei. Es verhindert, dass feste Höhen große Leerstellen erzeugen, wenn Sie Bilder unterschiedlicher Porträt-/Landschaftsorientierung haben.
Kann ich das für einen Logo-Schieberegler mit Graustufen zum Ausmalen im Schwebeflug verwenden?
Absolut! das ist ein perfekter Anwendungsfall Laden Sie Ihre Logo-Bilder hoch Im Reiter Karussell-Artikel stellen Sie den Normalzustand Opacity ein oder verwenden Sie einen CSS-Filter, um sie Graustufen zu machen, dann stellen Sie im Hover-Zustand die Opazität wieder auf 1 und entfernen Sie den Filter Das eingebaute Hover-Styling macht diesen Effekt einfach ohne benutzerdefinierten Code Oder verwenden Sie die Logo-Slider Widget, das für Client-Logos erstellt wurde.
Wie funktioniert die Einstellung "Beobachter", und wann sollte ich sie verwenden?
Der Observer achtet auf Änderungen im Behälter des Karussells Aktivieren Sie es (eingestellt auf Ja), wenn Sie das Karussell in ein Tab-, Akkordeon- oder Kipp-Widget oder an einen Ort legen, an dem es zunächst versteckt ist. Dadurch wird sichergestellt, dass das Karussell in dem Moment, in dem ein Benutzer klickt, um seinen übergeordneten Behälter freizulegen, korrekt rendert und funktioniert. Wenn es in einer Lasche kaputt ist, wird es normalerweise repariert.
Wird es zu Leistungsproblemen kommen, wenn mehrere Karussells mit Autoplay auf einer Seite vorhanden sind?
Es kann, wenn Sie viele haben (wie 15+).Jedes Autoplaying-Karussell ist ein bewegliches Element, das der Browser animieren muss Für beste Leistung beschränken Sie die Autoplay auf Ihr wichtigstes Heldenkarussell. Für andere sollten Sie darüber nachdenken, Benutzer manuell scrollen zu lassen. Außerdem ist die Verwendung optimierter Bildgrößen (durch Bildauflösungseinstellungen) entscheidend für die Geschwindigkeit.
Kann ich Karussell-Elemente mit verschiedenen URLs verknüpfen, anstatt nur mit der Lightbox?
Nicht mit diesem Widget Es öffnet Bilder in einer Lightbox, wenn jede Folie einen eigenen Link benötigt, verwenden Sie die Logo-Slider, oder die Link-Option in Elementors eigenem Image Carousel.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
