Как создать интерактивную карусель модулей Divi
Опубликовано: 2017-09-19Сегодняшний пост был отправлен Мишель Нунан из Divi Soup, где находится «Divi Kitchen», где она постоянно готовит новые и полезные уроки и курсы по Divi.
Карусели - популярная функция веб-сайтов. Они позволяют отображать больше контента, не занимая лишнего места, а также добавляют элемент интерактивности на ваш сайт, что может побудить ваших посетителей больше взаимодействовать с вашим контентом.
Существует ряд отличных плагинов, которые могут помочь отображать ваш контент в карусели, но в этом посте я покажу вам, как создать интерактивную карусель модулей Divi, используя только CSS и Javascript.
Этот эффект можно использовать практически с любыми стандартными модулями Divi или комбинацией модулей. Я собираюсь показать вам, как создать эту карусель, используя модуль изображения, а затем модуль блога, поскольку процесс для этого немного отличается. Оттуда вы должны понять, как создать свою собственную карусель практически с любыми стандартными модулями.
Результат
Это то, что у вас должно получиться после создания карусели с модулем блога.
Здесь вы можете увидеть живую демонстрацию, демонстрирующую эффект с использованием различных модулей Divi Builder.
Итак, приступим.
Добавить новую страницу
Начнем с создания карусели с модулем изображения. Добавьте новую страницу или откройте страницу, на которую вы хотите добавить карусель.
Добавить новый раздел
Добавьте на страницу новый стандартный раздел с одним столбцом. Затем откройте настройки раздела и на вкладке «Дополнительно» добавьте класс ds-carousel-section в поле «Класс CSS».
Поскольку мы собираемся изменить способ отображения раздела и строк, мы хотим, чтобы эти изменения применялись только к нашей карусели, поэтому мы добавляем настраиваемый класс, чтобы наш код не влиял на любые другие элементы на нашем сайте.
Затем сохраните и выйдите из раздела.
Теперь откройте настройки строки и на вкладке Advanced добавьте класс ds-carousel-row в поле CSS Class. Затем сохраните и выйдите из строки.
Далее мы собираемся добавить модуль изображения в нашу строку. Щелкните Вставить модуль (и) и выберите модуль изображения из списка.
На вкладке «Содержимое» модуля изображений нажмите «Загрузить изображение» и либо выберите желаемое изображение из медиатеки, либо загрузите новое.
Если вы хотите, чтобы ваши изображения открывались в лайтбоксе, выберите эту опцию в настройках.
В качестве альтернативы вы можете добавить URL-адрес, чтобы открывать новую страницу при щелчке по изображению, если хотите.
Последнее, что нам нужно сделать с модулем, - это добавить класс. Перейдите на вкладку «Дополнительно» и добавьте модуль класса ds-carousel-module в поле «Класс CSS». Затем сохраните и выйдите из модуля.
Это один из наших модулей, но для создания карусели нам понадобится несколько изображений. Код, который я предоставлю позже в этом посте, будет отображать 5 изображений за раз, поэтому нам понадобится как минимум 6 изображений, чтобы наши кнопки карусели имели какой-либо эффект и перемещали наш контент.
Используя функцию клонирования Divi, дублируйте модуль изображения столько раз, сколько хотите, чтобы изображения отображались в вашей карусели.
Когда вы закончите, ваш раздел должен выглядеть следующим образом, с вашими модулями изображений, сложенными в одну строку.
Вам нужно будет открыть настройки для каждого модуля и поменять местами изображения и URL-адрес, если вы его добавили.
На этом настройка контента завершена, теперь мы собираемся создать навигацию.
Добавить новый раздел
Добавьте новый раздел прямо под разделом с изображением, на этот раз с двумя столбцами.
Откройте настройки строки и на вкладке Advanced добавьте класс ds-arrow-row в поле CSS Class. Затем сохраните и выйдите из строки.
Добавьте навигацию
Затем добавьте текстовый модуль в каждый из двух столбцов в этой строке.
Теперь нам нужно создать поля ввода, которые будут служить кнопками навигации. Откройте текстовый модуль в левом столбце и в области содержимого вставьте следующий HTML-код:
<input id="ds-arrow-left" type="button" value="8">
Затем сохраните и выйдите из модуля.
Затем откройте текстовый модуль в правом столбце и вставьте следующий HTML-код:
<input id="ds-arrow-right" type="button" value="9">
Затем сохраните и выйдите из модуля.
Мы даем этим полям ввода уникальные идентификаторы ds-arrow-left и ds-arrow-right, чтобы мы могли стилизовать их с помощью CSS и нацеливать их с помощью JavaScript, чтобы сообщить им, что мы хотим, чтобы они делали при нажатии.
Значения 8 и 9 относятся к двойным стрелкам влево и вправо из семейства шрифтов ET Modules.
Это все, что нам нужно сделать в конструкторе. Если вы сейчас проверите переднюю часть своей страницы, это будет просто один столбец с изображениями, а затем две маленькие серые кнопки с 8 и 9 на них, и они ничего не сделают. Итак, перейдем к самой интересной части, добавив наш код.
Добавьте CSS
Я бы посоветовал добавить следующий CSS в вашу дочернюю тему, но если вы не используете дочернюю тему, то ее можно добавить в Divi> Параметры темы> Общие> Пользовательский CSS и обязательно нажмите «Сохранить».
/*Hide the section overflow*/
.ds-carousel-section {
width: 100%;
overflow: hidden;
}
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1000vw !important;
}
}
/*Style the navigation arrows*/
#ds-arrow-left,
#ds-arrow-right {
color: #fff;
background: gray;
font-family: 'ETModules';
font-size: 30px;
padding: 5px 30px;
border-style: none;
border-radius: 0;
cursor: pointer;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*Position the left arrow*/
#ds-arrow-left {
float: right;
margin-right: 5px;
}
/*Position the right arrow*/
#ds-arrow-right {
float: left;
margin-left: 5px;
}
/*Style navigation arrows on hover*/
#ds-arrow-left:hover,
#ds-arrow-right:hover {
-webkit-box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 6px 1px rgba(0, 0, 0, 0.2);
}
/*Style navigation arrows on click*/
#ds-arrow-left:active,
#ds-arrow-right:active {
-webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2) inset;
}
/*Make sure the modules span their entire container*/
.ds-carousel-module .column {
float: left;
width: 100% !important;
margin-right: 0 !important;
}
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the module displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Отредактируйте CSS под свои нужды
Вам может потребоваться отредактировать некоторые объявления CSS в зависимости от того, сколько модулей вы используете в своей карусели.
А теперь немного математики!
Это объявление устанавливает ширину строки, содержащей модули.
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 1000vw;
max-width: 1000vw;
}Чтобы разместить наши модули рядом друг с другом, чтобы некоторые из них находились за пределами видимой области, нам нужно увеличить ширину ряда.
Если вы отображаете всего 15 модулей по 5 на странице, то в итоге вы получите 3 страницы. Итак, видимая ширина строки должна быть:
(15/5) х 100 = 300.
Поэтому вам нужно будет изменить значения 1000vw как минимум на 300vw. (Не имеет значения, если вы вставите большее число, поскольку JavaScript позаботится о том, чтобы не отображать лишние пустые страницы). Итак, ваш скорректированный CSS будет выглядеть так:
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}С медиа-запросами дело обстоит немного иначе. Поскольку CSS настроен для отображения 3 изображений на странице на экранах шириной 1024 пикселя и менее и 1 изображение на страницу на экранах шириной 479 пикселей или менее, нам необходимо скорректировать математику, чтобы отразить это:
(15/3) x 100 = 500 (для планшетов)
(15/1) x 100 = 1500 (для мобильных)
Ваш скорректированный CSS будет выглядеть так:
@media all and (max-width: 1024px) {
/*Override Divi's width setting on tablets*/
.ds-carousel-section .ds-carousel-row {
max-width: 500vw !important;
}
}
@media all and (max-width: 479px) {
/*Override Divi's width setting on mobiles*/
.ds-carousel-section .ds-carousel-row {
max-width: 1500vw !important;
}
}Вы можете, если хотите, просто изменить все эти значения на ширину, превышающую общее количество модулей, которые вы используете для простоты. Итак, в вышеупомянутом примере это значение будет 1500vw или больше.
Вы также можете изменить количество модулей, отображаемых на странице. Это объявление CSS - это то место, где вы можете это настроить.
/*Set the module width*/
.ds-carousel-module {
width: 20vw; /*Change this value to increase or decrease the modules displayed per page*/
padding: 0 30px;
float: left;
position: relative;
margin-bottom: 0 !important;
}
Значение ширины 20vw отображает 5 изображений на странице, и это всего лишь процент от 100. Таким образом, 25vw будет отображать 4 изображения на страницу, а 16.66vw будет отображать 6 изображений на странице и так далее.
Вы можете сделать то же самое для медиа-запросов:
/*Adjust for smaller screens*/
@media all and (max-width: 1024px) {
/*Show 3 modules per page on tablets*/
.ds-carousel-module {
width: 33.33vw;
}
/*Align the navigation on smaller screens*/
#ds-arrow-row .et_pb_column {
width: 50% !important;
}
}
@media all and (max-width: 479px) {
/*Show 1 module per page on mobiles*/
.ds-carousel-module {
width: 100vw;
}
}Помните, что если вы измените количество изображений, отображаемых на странице, вам также может потребоваться изменить значение ширины строки, о котором говорилось ранее.
Если вы сейчас снова проверите свою страницу, все должно быть красиво оформлено и выглядеть как карусель, но для того, чтобы она работала, нам нужно добавить немного JavaScript.
Добавьте JavaScript
Скопируйте и вставьте следующий код в Divi> Параметры темы> Интеграции> Добавьте код в <заголовок> вашего блога и не забудьте сохранить.
<script type="text/javascript">
(function ($) {
var mn_index = 0; //Starting index
var mn_visible = 5;
var mn_end_index = 0;
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}
function mn_carousel_init() {
mn_set_visible();
var item = $('.ds-carousel-module');
$('#ds-arrow-right').click(function() {
mn_next_slide(item);
});
$('#ds-arrow-left').click(function() {
mn_previous_slide(item);
});
$(window).resize(function() {
mn_set_visible();
mn_first_slide(item);
});
}
$(document).ready(function() {
mn_carousel_init();
});
})(jQuery)
</script>Этот код добавляет функциональность нашим кнопкам, перемещая строку влево и вправо при нажатии для отображения модулей.
Есть пара областей, которые вы, возможно, захотите отредактировать:
var mn_index = 0; //Starting index var mn_visible = 5; var mn_end_index = 0;
Mn_visible = 5; Переменная соответствует количеству модулей, отображаемых на странице на рабочем столе. Поэтому, если вы изменили это в CSS, как упоминалось ранее, вы также захотите изменить это значение.
Точно так же эта функция регулирует количество изображений, отображаемых на планшетах и мобильных телефонах. Так что, если вы изменили это в CSS, отрегулируйте значения mn_visible и здесь.
function mn_set_visible() {
if ($(window).width() < 480) {
mn_visible = 1;
} else if ($(window).width() < 1025) {
mn_visible = 3;
}
}Наконец, у нас есть скорость, с которой движется карусель. Здесь установлено значение 1000. Это скорость в миллисекундах: 1000 миллисекунд = 1 секунда.
Вы можете настроить это значение, чтобы ускорить или замедлить анимацию.
function mn_next_slide(item) {
mn_end_index = ( item.length / mn_visible ) - 1; //End index
if (mn_index < mn_end_index ) {
mn_index++;
item.animate({'left':'-=100vw'}, 1000);
}
}
function mn_previous_slide(item) {
if (mn_index > 0) {
mn_index--;
item.animate({'left':'+=100vw'}, 1000);
}
}
function mn_first_slide(item) {
if (mn_index > 0) {
var move_vw = (100 * mn_index);
item.animate({'left':'+='+move_vw+'vw'}, 1000);
mn_index = 0;
}
}Вот и все! Теперь, если вы просматриваете свою страницу, у вас должна появиться интерактивная карусель модулей изображений.
Как я уже сказал, вы можете использовать этот метод практически с любыми стандартными модулями построителя Divi, но вам может потребоваться настроить параметры с помощью модулей, предназначенных для отображения какой-либо ленты, например модуля блога.
Поскольку модуль блога втягивает сообщения и отображает их в нескольких столбцах (при использовании функции сетки), это потребует настройки параметров модуля и небольшого количества дополнительных CSS.
Карусель с использованием модуля блога
Выполните те же действия, чтобы настроить секцию и строку.
Вместо добавления модуля изображения выберите модуль блога и добавьте класс ds-carousel-module на вкладке «Дополнительно» в настройках модуля.
Затем на вкладке «Дизайн» выберите «Сетка» в раскрывающемся списке макета.
Вы можете оставить его как Fullwidth, если хотите, но опция Grid автоматически добавляет стиль, который лучше подходит для макета карусели.
Теперь нам нужно настроить некоторые параметры на вкладке Content.
Для этого первого модуля нам нужно, чтобы номер сообщения был установлен на 1, а номер смещения - на 0.
Как вы отрегулируете остальные параметры и какой контент вы будете отображать, полностью зависит от вас. Затем сохраните и выйдите.
Как и раньше, используйте функцию клонирования Divi, чтобы дублировать модуль столько раз, сколько вам нужно.
Как только у вас будет необходимое количество модулей блога, откройте каждый из них и каждый раз увеличивайте число смещения на 1, чтобы каждый модуль блога отображал следующее сообщение в ленте.
Итак, ваши настройки будут выглядеть так:
1-й = номер смещения: 0
2-й = номер смещения: 1
3-й = номер смещения: 2
4-й = номер смещения: 3
И т.п.
Немного лишнего CSS
Поскольку модуль блога отображается в столбцах при использовании формата сетки, нам нужно добавить этот дополнительный медиа-запрос в наш CSS, чтобы переопределить настройку столбца Divi на небольших экранах:
@media all and (max-width: 980px) {
/*Set post to fullwidth on smaller screens*/
.ds-carousel-section .et_pb_blog_grid .column.size-1of2 {
width: 100% !important;
margin: 0 !important;
}
}Если вы решили использовать модуль блога в режиме полной ширины, вам не нужно его добавлять.
Результат
Теперь проверьте свою страницу и увидите свою прекрасную новую карусель для блогов.
Последние мысли
Есть много способов использовать этот эффект карусели для отображения большего количества контента, не увеличивая длину вашей страницы.
Вы можете показать витрину дизайна своего сайта, отзывы клиентов, биографии сотрудников, видео, подкасты или даже продукты из вашего магазина.
Я хотел бы услышать, как вы используете это руководство для создания интерактивной карусели модулей Divi, поэтому, пожалуйста, оставьте комментарий в разделе ниже!
Лучшее изображение: aunaauna / Shutterstock.com