Ein Karussell-Layout hinzufügen.

DXPR Builder lernenSeiten erstellenInhalte hinzufügenLayout

Nutzen Sie das Karussell-Layout-Element, wenn Inhalte sich an einer Stelle abwechseln sollen, etwa Zitate, Angebote oder Ankündigungen. Sie erhalten Slides, die automatisch weiterlaufen, mit einem Punkt pro Slide. Anders als im Image carousel fasst jeder Slide beliebige Elemente: Text, Bilder, Buttons und mehr. Das Beispiel baut einen Slider mit Studierenden-Zitaten.

Ein Slider mit Studierenden-Zitaten auf einem hellgrauen Band, der Aisha Khans Zitat zeigt, mit einem Balken für jeden seiner drei Slides

  1. Fahren Sie über die Spalte und klicken Sie auf + in ihrer Kontrollleiste, um den Element-Picker zu öffnen.
  2. Klicken Sie im Tab Layout auf Carousel.
  3. Seine Einstellungen öffnen sich zuerst. Klicken Sie auf Save, um die Standards zu behalten. Das Karussell erscheint mit einem leeren Slide.
  4. Klicken Sie auf + im Slide und fügen Sie Inhalt hinzu, etwa ein Text-Element.
  5. Um einen Slide hinzuzufügen, fahren Sie über das Karussell und klicken Sie auf Add slide in seiner Kontrollleiste. Klicken Sie auf den Punkt des Slides unter dem Karussell, um ihn zu öffnen, und füllen Sie ihn genauso.

Was Sie sehen

Der erste Slide wird mit einem Balken pro Slide darunter angezeigt. Alle 5 Sekunden fährt der nächste Slide herein, und nach dem letzten kommt der erste zurück. Besucher können auf einen Balken klicken, um zu einem Slide zu springen, oder auf einem Touchscreen wischen. Jeder Slide übernimmt die Höhe des höchsten, sodass der Inhalt unter dem Karussell nicht springt.

Öffnen Sie die Einstellungen über More > Settings in der Kontrollleiste von Carousel. Das Panel General enthält das Timing.

Einstellung Funktion Standard
Frames per slide Wie viele Slides nebeneinander gezeigt werden, von 1 bis 10. Schmalere Bildschirme zeigen weniger, bis zu einem auf Telefonen 1
Disable auto-play Stoppt das automatische Weiterschalten der Slides Off
Auto-play interval Zeit zwischen den Slides, von 1000 bis 20000 Millisekunden 5000
Stop on hover Pausiert Autoplay, solange der Zeiger über dem Karussell ist Off
Dots navigation Im Panel Dots: zeigt einen Punkt pro Slide On
Next/Previous Im Panel Next/Previous: zeigt Pfeil-Buttons Off

Punkte und Pfeile

Mit eingeschaltetem Dots navigation bietet das Panel Dots außerdem:

  • Dots orientation: Outside slider (darunter) oder Inside slider
  • Dot shape: Bar, Circle, Square oder Triangle
  • Active dot transformation: None, Grow taller, Grow wider oder Scale up
  • Dot color und Active dot color

Mit eingeschaltetem Next/Previous bietet das Panel Next/Previous außerdem:

  • Orientation: Outside slider oder Inside slider
  • Dot shape: der Button hinter jedem Pfeil, No background, Circle, Square oder Bar
  • Icon color, Icon hover color, Background color und Background hover color
  • Outside navigation position: Adjacent, Top center, Top left, Top right, Bottom center, Bottom left oder Bottom right

Slide-Ideen

  • Testimonial slider: Legen Sie auf jeden Slide ein Block quote mit dem Zitat und ein Text-Element mit dem Namen. Lassen Sie Dots navigation an und Next/Previous aus und setzen Sie Auto-play interval auf 7000, damit Besucher zu Ende lesen können.
  • Hero carousel: Öffnen Sie More > Settings eines Slides und wählen Sie ein Foto als Background image in seinem Panel Style. Fügen Sie ein Text-Element mit der Überschrift und einen Button hinzu. Schalten Sie Stop on hover ein, damit Besucher lesen und klicken können.

Wenn Sie es nicht sehen

  • Es gibt keine Punkte unter dem Karussell. Punkte erscheinen erst ab zwei Slides und nur mit eingeschaltetem Dots navigation. Klicken Sie auf Add slide oder schalten Sie Dots navigation im Panel Dots ein.
  • Der neue Slide erscheint nicht nach Add slide. Neue Slides werden am Ende angefügt und bleiben verborgen, bis Sie sie öffnen. Klicken Sie auf den letzten Punkt unter dem Karussell.
  • Die Slides laufen nicht von allein. Disable auto-play ist an. Schalten Sie es im Panel General der Karussell-Einstellungen aus.
  • Es gibt keine Pfeile. Next/Previous ist standardmäßig aus. Schalten Sie es im Panel Next/Previous ein.
  • Carousel fehlt im Layout-Tab des Pickers. Ihr DXPR Builder-Benutzerprofil lässt es aus. Ein Administrator wählt Carousel unter Elements in Ihrem Profil unter /admin/dxpr_studio/dxpr_builder/profile.

Wie geht es weiter?