Dodawanie układu karuzeli..

Learn DXPR BuilderBuild pagesAdd contentLay-out

Użyj elementu układu Carousel, gdy treść ma zmieniać się w jednym miejscu, na przykład cytaty, oferty albo ogłoszenia. Powstają slajdy przewijające się same, z kropką na każdy slajd. W przeciwieństwie do karuzeli zdjęć każdy slajd mieści dowolne elementy: tekst, zdjęcia, przyciski i więcej. Przykład buduje suwak z cytatami studentów.

Suwak z cytatami studentów na jasnoszarym pasie, pokazujący cytat Aisha Khan, z paskiem na każdy z trzech slajdów

  1. Najedź na kolumnę i kliknij + na jej pasku sterowania, aby otworzyć selektor elementów.
  2. Na karcie Layout kliknij Carousel.
  3. Otwierają się najpierw jego ustawienia. Kliknij Save, aby zachować domyślne. Karuzela pojawia się z jednym pustym slajdem.
  4. Kliknij + w slajdzie i dodaj treść, na przykład element Text.
  5. Aby dodać slajd, najedź na karuzelę i kliknij Add slide na jej pasku sterowania. Kliknij kropkę slajdu pod karuzelą, aby go otworzyć, a potem wypełnij go tak samo.

Efekt

Pierwszy slajd pokazuje się z paskiem na każdy slajd pod spodem. Co 5 sekund wjeżdża następny slajd, a po ostatnim wraca pierwszy. Odwiedzający mogą kliknąć pasek, aby skoczyć do slajdu, albo przesunąć palcem na ekranie dotykowym. Każdy slajd przyjmuje wysokość najwyższego, więc treść pod karuzelą nie skacze.

Otwórz ustawienia z More > Settings na pasku sterowania Carousel. Panel General trzyma czas.

Ustawienie Do czego służy Domyślnie
Frames per slide Ile slajdów widać obok siebie, od 1 do 10. Wąskie ekrany pokazują mniej, do jednego na telefonach 1
Disable auto-play Zatrzymuje samodzielne przewijanie slajdów Off
Auto-play interval Czas między slajdami, od 1000 do 20000 milisekund 5000
Stop on hover Wstrzymuje autoodtwarzanie, gdy kursor jest nad karuzelą Off
Dots navigation W panelu Dots: pokazuje kropkę na każdy slajd On
Next/Previous W panelu Next/Previous: pokazuje przyciski strzałek Off

Kropki i strzałki

Przy włączonym Dots navigation panel Dots oferuje też:

  • Dots orientation: Outside slider (pod spodem) albo Inside slider
  • Dot shape: Bar, Circle, Square albo Triangle
  • Active dot transformation: None, Grow taller, Grow wider albo Scale up
  • Dot color i Active dot color

Przy włączonym Next/Previous panel Next/Previous oferuje też:

  • Orientation: Outside slider albo Inside slider
  • Dot shape: tło przycisku za każdą strzałką, No background, Circle, Square albo Bar
  • Icon color, Icon hover color, Background color i Background hover color
  • Outside navigation position: Adjacent, Top center, Top left, Top right, Bottom center, Bottom left albo Bottom right

Pomysły na slajdy

  • Testimonial slider: umieść Block quote z cytatem i element Text z nazwiskiem na każdym slajdzie. Zostaw włączone Dots navigation, wyłączone Next/Previous i ustaw Auto-play interval na 7000, aby odwiedzający zdążyli doczytać.
  • Hero carousel: otwórz More > Settings slajdu i wybierz zdjęcie jako Background image w jego panelu Style. Dodaj element Text z nagłówkiem i Button. Włącz Stop on hover, aby odwiedzający mogli czytać i klikać.

Jeśli go nie widzisz

  • Pod karuzelą nie ma kropek. Kropki pokazują się dopiero przy dwóch slajdach i tylko przy włączonym Dots navigation. Kliknij Add slide albo włącz Dots navigation w panelu Dots.
  • Nowy slajd nie pokazuje się po Add slide. Nowe slajdy lądują na końcu i pozostają ukryte, dopóki ich nie otworzysz. Kliknij ostatnią kropkę pod karuzelą.
  • Slajdy nie przesuwają się same. Disable auto-play jest włączone. Wyłącz je w panelu General ustawień karuzeli.
  • Nie ma strzałek. Next/Previous jest domyślnie wyłączone. Włącz je w panelu Next/Previous.
  • Karuzeli nie ma na karcie Layout selektora. Twój profil użytkownika DXPR Builder ją pomija. Administrator zaznacza Carousel w Elements w twoim profilu pod adresem /admin/dxpr_studio/dxpr_builder/profile.

Co dalej?