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

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

Використовуйте елемент макета Carousel, коли хочете, щоб вміст змінювався в одному місці: цитати, пропозиції чи оголошення. У результаті ви маєте слайди, що гортаються самі, з крапкою для кожного слайда. На відміну від каруселі зображень, кожен слайд містить будь-які елементи: текст, зображення, кнопки й інше. Приклад створює слайдер цитат студентів.

Слайдер цитат студентів на світло-сірій смузі, що показує цитату Aisha Khan, зі смужкою для кожного з трьох слайдів

  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.

Що далі?