--- url: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-karuzeli' title: 'Dodawanie układu karuzeli. | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:45:25+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - Layout image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dodawanie układu karuzeli.' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:45:25+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-karuzeli' articleSection: Układ - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/uklad-karuzeli' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/dokumentacja) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Dodaj treści](/pl/hc/documentation/learn-dxpr-builder/elements) /[Układ](/pl/hc/documentation/learn-dxpr-builder/layout/overview) # Dodawanie układu karuzeli.. Poznaj DXPR BuilderBuduj stronyDodaj treściUkład ## W tym przewodniku Powiązane przewodniki - [Dodawanie karuzeli obrazów](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/karuzela-obrazow) - [Dodawanie panelu kart.](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/panel-kart) - [Animuj elementy przy przewijaniu, najechaniu i kliknięciu](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje) 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ęć](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/karuzela-obrazow) każdy slajd mieści dowolne elementy: tekst, zdjęcia, przyciski i więcej. Przykład buduje suwak z cytatami studentów. ## Dodawanie układu karuzeli 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. ## Konfiguracja karuzeli 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? - [Karuzela zdjęć](/pl/hc/dokumentacja/nauka-dxpr-builder/elementy/karuzela-obrazow): pokaz samych zdjęć, konfigurowany w jednym oknie. - [Dodawanie panelu kart](/pl/hc/dokumentacja/nauka-dxpr-builder/uklad/panel-kart): pozwól odwiedzającym wybierać treść zamiast na nią czekać. - [Karta animacji](/pl/hc/dokumentacja/nauka-dxpr-builder/projektowanie/animacje): dodaj efekty wejścia do treści każdego slajdu.