---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%96'
title: 'Додавання макета каруселі | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T20:06:47+00:00'
updated: '2026-10-24T20:08:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Використовуйте елемент макета Carousel, коли хочете, щоб вміст змінювався в одному місці: цитати, пропозиції чи оголошення. У результаті ви маєте слайди, що гортаються самі, з крапкою для кожного слайда.'
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-24T20:08:10+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Додавання макета каруселі'
      description: 'Використовуйте елемент макета Carousel, коли хочете, щоб вміст змінювався в одному місці: цитати, пропозиції чи оголошення. У результаті ви маєте слайди, що гортаються самі, з крапкою для кожного слайда.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T20:06:47+0000'
      dateModified: '2026-10-24T20:08:10+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%96'
      articleSection: Макет
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82-%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%96'
      description: 'Використовуйте елемент макета Carousel, коли хочете, щоб вміст змінювався в одному місці: цитати, пропозиції чи оголошення. У результаті ви маєте слайди, що гортаються самі, з крапкою для кожного слайда.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Додавання вмісту](/uk/hc/documentation/learn-dxpr-builder/elements) /[Макет](/uk/hc/documentation/learn-dxpr-builder/layout/overview) # Додавання макета каруселі.

 Вивчення DXPR BuilderСтворення сторінокДодавання вмістуМакет

   ## In this guide

 Related guides

- [Додавання каруселі зображень](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C)
- [Додавання панелі вкладок](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA)
- [Анімація елементів під час прокручування, наведення чи натискання](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F)

Використовуйте елемент макета Carousel, коли хочете, щоб вміст змінювався в одному місці: цитати, пропозиції чи оголошення. У результаті ви маєте слайди, що гортаються самі, з крапкою для кожного слайда. На відміну від [каруселі зображень](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C), кожен слайд містить будь-які елементи: текст, зображення, кнопки й інше. Приклад створює слайдер цитат студентів.

## Додавання макета каруселі

1. Наведіть курсор на стовпець і натисніть **+** на його панелі керування, щоб відкрити вибір елементів.
2. На вкладці **Layout** натисніть **Carousel**.
3. Спочатку відкриються його налаштування. Натисніть **Save**, щоб зберегти стандартні. Карусель з’явиться із одним порожнім слайдом.
4. Натисніть **+** усередині слайда й додайте вміст, наприклад елемент **Text**.
5. Щоб додати слайд, наведіть курсор на карусель і натисніть **Add slide** на її панелі керування. Натисніть крапку слайда під каруселлю, щоб відкрити його, потім наповніть так само.

  ## Що ви бачите

Показується перший слайд зі смужкою для кожного слайда під ним. Кожні 5 секунд в’їжджає наступний слайд, а після останнього повертається перший. Відвідувачі можуть натиснути смужку, щоб перейти до слайда, або гортати на сенсорному екрані. Кожен слайд набуває висоти найвищого, тож вміст під каруселлю не стрибає.

## Налаштування каруселі

Відкрийте налаштування через **More** > **Settings** на панелі керування **Carousel**. Панель **General** містить налаштування часу.

| Налаштування | Що робить | Стандартно |
|---|---|---|
| **Frames per slide** | Скільки слайдів показується поруч, від 1 до 10. Вузькі екрани показують менше, до одного на телефонах | 1 |
| **Disable auto-play** | Зупиняє автоматичне гортання слайдів | Off |
| **Auto-play interval** | Час між слайдами, від 1000 до 20000 мілісекунд | 5000 |
| **Stop on hover** | Призупиняє автопрогравання, доки вказівник над каруселлю | Off |
| **Dots navigation** | На панелі **Dots**: показує крапку для кожного слайда | On |
| **Next/Previous** | На панелі **Next/Previous**: показує кнопки-стрілки | Off |

### Крапки й стрілки

Із увімкненим **Dots navigation** панель **Dots** також пропонує:

- **Dots orientation**: **Outside slider** (під ним) або **Inside slider**
- **Dot shape**: **Bar**, **Circle**, **Square** або **Triangle**
- **Active dot transformation**: **None**, **Grow taller**, **Grow wider** або **Scale up**
- **Dot color** і **Active dot color**

Із увімкненим **Next/Previous** панель **Next/Previous** також пропонує:

- **Orientation**: **Outside slider** або **Inside slider**
- **Dot shape**: кнопка за кожною стрілкою, **No background**, **Circle**, **Square** або **Bar**
- **Icon color**, **Icon hover color**, **Background color** і **Background hover color**
- **Outside navigation position**: **Adjacent**, **Top center**, **Top left**, **Top right**, **Bottom center**, **Bottom left** або **Bottom right**

## Ідеї слайдів

- **Testimonial slider**: розмістіть на кожному слайді **Block quote** із цитатою й елемент **Text** із ім’ям. Лишіть **Dots navigation** увімкненим, а **Next/Previous** вимкненим, і встановіть **Auto-play interval** на 7000, щоб відвідувачі встигали дочитати.
- **Hero carousel**: відкрийте **More** > **Settings** слайда й виберіть фото як **Background image** на його панелі **Style**. Додайте елемент **Text** із заголовком і **Button**. Увімкніть **Stop on hover**, щоб відвідувачі могли читати й натискати.

## Якщо елемент не відображається

- **Під каруселлю немає крапок.** Крапки показуються, лише коли карусель має два слайди, і лише із увімкненим **Dots navigation**. Натисніть **Add slide** або увімкніть **Dots navigation** на панелі **Dots**.
- **Новий слайд не показується після Add slide.** Нові слайди додаються в кінець і лишаються прихованими, доки ви їх не відкриєте. Натисніть останню крапку під каруселлю.
- **Слайди не рухаються самі.** **Disable auto-play** увімкнено. Вимкніть його на панелі **General** налаштувань каруселі.
- **Немає стрілок.** **Next/Previous** стандартно вимкнено. Увімкніть його на панелі **Next/Previous**.
- **Carousel немає на вкладці Layout вибору.** Ваш профіль користувача DXPR Builder його не включає. Адміністратор позначає **Carousel** у розділі **Elements** вашого профілю за адресою `/admin/dxpr_studio/dxpr_builder/profile`.

## Що далі?

- [Карусель зображень](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C): слайдшоу лише із зображень, налаштоване в одному діалоговому вікні.
- [Додавання панелі вкладок](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82-%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BE%D0%BA): нехай відвідувачі вибирають вміст замість очікування.
- [Вкладка анімації](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F): додайте ефекти появи до вмісту кожного слайда.