Как создать автоматическую карусель с Divi & Slick.js

Каждую неделю мы предоставляем вам новые бесплатные пакеты макетов Divi, которые вы можете использовать в своем следующем проекте. Для одного из пакетов макетов мы также расскажем о сценарии использования, который поможет вам вывести свой веб-сайт на новый уровень.

На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы собираемся показать вам, как создать автоматическую карусель с Divi, Slick.js и пакетом макетов магазина мороженого. Мы начнем с включения красивой библиотеки JS на наш веб-сайт и продолжим, заставив ее работать внутри Divi Builder. Это отличный способ создать автоматическую карусель для любого модуля, который вы хотите продемонстрировать. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

Предварительный просмотр

Прежде чем мы углубимся в руководство, давайте быстро посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Загрузите макет автоматической карусели БЕСПЛАТНО

Чтобы получить доступ к бесплатному макету автоматической карусели, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Убедитесь, что вы включили файл Slick.js в теги заголовка! Без него ничего не получится. См. Первый шаг ниже.

1. Добавьте Slick JS к интеграции с темой Divi

Перейти к параметрам темы Divi

Первая часть этого урока очень важна; добавление Slick.js на ваш сайт. Для этого перейдите в Параметры темы Divi.

Добавить Slick.js в теги заголовков

Перейдите на вкладку интеграции и добавьте файл Slick.js в теги заголовка вашего веб-сайта.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

2. Создайте новую страницу, используя макет меню магазина мороженого

Добавить новую страницу

Продолжите, добавив новую страницу на свой сайт. Дайте своей странице заголовок, опубликуйте страницу и переключитесь на Divi Builder.

Загрузить макет меню магазина мороженого

В этом уроке мы используем макет меню Ice Cream Shop Layout Pack, но не стесняйтесь использовать любую другую страницу / макет по вашему выбору.

2. Добавить новый раздел на страницу

Добавить новый раздел

Следующим шагом в создании автоматической карусели является добавление нового раздела на вашу страницу.

Фоновый цвет

Откройте настройки раздела и измените цвет фона.

• Цвет фона: # f5f5f5

Нижний разделитель

Также добавьте к разделу нижний разделитель.

• Стиль разделителя: найти в списке
• Цвет разделителя: #ffffff
• Вес разделителя: 10vw

Интервал

Наряду с некоторой нижней обивкой.

• Нижняя обивка: 10vw

Добавить новую строку

Структура столбца

Продолжите, добавив первую строку, используя следующую структуру столбцов:

Добавить модуль текста заголовка в столбец

Добавить контент H2

Добавьте текстовый модуль в столбец строки и вставьте содержимое H2 по вашему выбору.

Настройки текста H2

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста H2:

• Шрифт заголовка 2: Подсказка
• Толщина шрифта заголовка 2: Ультра легкий
• Выравнивание текста заголовка 2: по центру
• Размер текста заголовка 2: 60 пикселей (рабочий стол), 40 пикселей (планшет), 25 пикселей (телефон)
• Высота строки заголовка 2: 1,2 м

Размеры

Измените также настройки размера модуля.

• Максимальная ширина: 800 пикселей
• Выравнивание модуля: по центру

3. Выделите новую строку с одним столбцом для автоматического ползунка.

Добавить новую строку

Структура столбца

Чтобы создать автоматическую карусель, нам нужно выделить новую строку для элементов, которые мы хотим разместить внутри карусели. Убедитесь, что вы выбрали строку только с одним столбцом. В следующих шагах мы превратим этот столбец в автоматическую карусель.

Размеры

Не добавляя никаких модулей, откройте настройки строки и разрешите строке занимать всю ширину экрана в настройках размера.

• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Добавьте верхнее поле и удалите все отступы по умолчанию сверху и снизу.

• Верхнее поле: 50 пикселей
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Переполнения

Мы также убеждаемся, что ничто не превосходит контейнер строки, скрывая переполнение.

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Настройки столбца

Продолжите, открыв настройки столбца.

CSS классы

Добавьте в столбец два разных класса CSS. Убедитесь, что вы оставили между ними пространство. Позже в этом руководстве мы будем использовать эти классы для создания автоматической карусели.

• Класс CSS: слайдер мороженого

Добавить первый элемент слайдера в столбец (модуль призыва к действию)

Контент по умолчанию

Пора начинать добавлять первый элемент карусели! Мы будем использовать модуль призыва к действию, но не стесняйтесь использовать любой другой модуль по вашему выбору. Введите контент по вашему выбору.

Контент при наведении

Замените заголовок и содержимое тела пустым символом (например, этим: ''), чтобы удалить содержимое при наведении курсора.

Ссылка

Убедитесь, что вы добавили ссылку на модуль, чтобы появилась кнопка.

• URL ссылки на кнопку: #

Фон градиента по умолчанию

Затем перейдите в настройки фона и добавьте градиентный фон.

• Цвет 1: # 8300e9
• Цвет 2: rgba (41,196,169,0)
• Тип градиента: радиальный
• Радиальное направление: верх
• Стартовая позиция: 35%
• Конечная позиция: 35%

Удалить фон с градиентом при наведении

Удалите градиентный фон при наведении курсора.

Фоновая картинка

Также загрузите соответствующее фоновое изображение.

Настройки текста заголовка

Перейдите на вкладку дизайна и соответствующим образом измените настройки текста заголовка:

• Шрифт заголовка: Подсказка
• Размер текста заголовка: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Высота строки заголовка: 2vw (рабочий стол), 3vw (планшет), 4vw (телефон)

Настройки основного текста

Измените также настройки основного текста.

• Шрифт основного текста: Open Sans
• Размер основного текста: 0.9vw (рабочий стол), 2vw (планшет), 2.5vw (телефон)
• Высота линии корпуса: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)

Настройки кнопок

Затем перейдите к настройкам кнопки и задайте для кнопки следующий стиль:

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 0.9vw (рабочий стол), 1.5vw (планшет), 2vw (телефон)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # 000000 (по умолчанию), # ff6f7e (при наведении)
• Ширина границы кнопки: 0 пикселей

• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 2 пикселя
• Шрифт кнопки: Подсказка
• Толщина шрифта кнопки: Обычный
• Стиль шрифта кнопок: прописные

• Верхнее поле: 19vw (рабочий стол), 30vw (планшет), 45vw (телефон)
• Верхнее заполнение: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Нижняя прокладка: 1vw (рабочий стол), 2vw (планшет), 3vw (телефон)
• Левое заполнение: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)
• Правое заполнение: 2vw (рабочий стол), 4vw (планшет), 5vw (телефон)

Размеры

Мы также изменяем ширину и высоту модуля.

• Ширина: 23vw
• Высота: 23vw (настольный), 50vw (планшет), 80vw (телефон)

Интервал

И последнее, но не менее важное: перейдите к настройкам интервала и добавьте некоторые настраиваемые значения полей и отступов.

• Левое поле: 1vw
• Правое поле: 1vw
• Верхняя прокладка: 2vw (рабочий стол), 4vw (планшет), 6vw (телефон)

4. Клонируйте элемент слайдера столько раз, сколько нужно.

Клонировать модуль CTA четыре раза

Завершив первый модуль CTA, вы можете клонировать его столько раз, сколько захотите. Каждый модуль в этом столбце будет частью автоматической карусели.

Измените контент, градиентный фон и фоновое изображение для каждого дубликата

Убедитесь, что вы изменили контент, градиентный фон и фоновое изображение каждого дубликата, чтобы сделать каждый модуль CTA уникальным.

5. Добавить новую строку ниже предыдущей

Добавьте следующую и последнюю строку в раздел, используя следующую структуру столбцов:

Вставить первый модуль кода с кодом jQuery

Добавить новый модуль кода в столбец

Добавьте в столбец первый модуль кода.

Вставить код CSS

И вставьте следующие строки кода CSS:

<style>
.slick-slider
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-slide
{
float: left;
}
</style>

Вставить второй модуль кода с кодом CSS

Добавить новый модуль кода в столбец

Добавьте еще один модуль кода прямо под предыдущим.

Вставить код jQuery

И вставьте следующие строки кода jQuery:

<script>
jQuery(function($){
$('.icecream-items').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 700,
arrows: false,
dots: false,
pauseOnHover: true,
responsive: [{
breakpoint: 1079,
settings: {
slidesToShow: 2
}
}]
});
});
</script>

После добавления кода CSS и jQuery вы можете выйти из Visual Builder, чтобы просмотреть результат!

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана.

Рабочий стол

Мобильный

Последние мысли

В этом посте мы показали вам, как создать автоматическую карусель с помощью Divi, slick.js и пакета макетов магазина мороженого. Это отличный способ добавить взаимодействия к вашему сайту. Вы можете заставить эту технику работать с любым модулем, который хотите отобразить! Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже.

Если вы хотите узнать больше о Divi и получить больше бесплатных подарков Divi, убедитесь, что вы подписались на нашу рассылку новостей по электронной почте и канал YouTube, чтобы вы всегда были одним из первых, кто узнает и извлекает выгоду из этого бесплатного контента.