如何创建可点击的 Divi 模块轮播
已发表: 2017-09-19今天的帖子是由 Divi Soup 的 Michelle Nunan 提交的，这里是“Divi Kitchen”的所在地，她在那里不断地编写新的和有用的 Divi 教程和电子课程。
轮播是一种流行的网站功能。 它们允许您在不占用额外空间的情况下显示更多内容，并且它们还为您的网站添加了交互元素，可以鼓励您的访问者更多地参与您的内容。
有许多很棒的插件可以帮助在轮播中显示您的内容，但在这篇文章中，我将向您展示如何仅使用 CSS 和 Javascript 创建可点击的 Divi 模块轮播。
这种效果几乎可以与任何标准的 Divi 模块或模块组合一起使用。 我将向您展示如何使用图像模块创建此轮播，然后使用博客模块作为此过程略有不同。 从那里您应该了解如何使用几乎所有标准模块创建自己的轮播。
结果
这就是在使用 blog 模块创建轮播后你应该得到的结果
你可以在这里看到一个现场演示，展示了使用各种 Divi Builder 模块的效果。
让我们开始吧。
添加新页面
我们将首先创建一个带有图像模块的轮播。 添加新页面或打开要添加轮播的页面。
添加新版块
向您的页面添加一个新的标准部分，其中包含一列。 然后打开部分设置并在高级选项卡中，在 CSS 类字段中添加类ds-carousel-section 。
由于我们将更改部分和行的显示方式，我们只希望将这些更改应用于我们的轮播，因此我们添加了一个自定义类来防止我们的代码影响我们网站上的任何其他元素。
然后保存并退出该部分。
现在打开行设置并在高级选项卡中，在 CSS 类字段中添加类ds-carousel-row 。 然后保存并退出该行。
接下来，我们将向我们的行添加一个图像模块。 单击插入模块并从列表中选择图像模块。
在图像模块的内容选项卡中，单击上传图像，然后从媒体库中选择所需的图像或上传新图像。
如果您希望图像在灯箱中打开，请在设置中选择此选项。
或者，如果您愿意，您可以添加一个 url 以在单击图像时打开一个新页面。
我们需要对模块做的最后一件事是添加一个类。 单击 Advanced 选项卡并在 CSS Class 字段中添加类ds-carousel-module 。 然后保存并退出模块。
这是我们完成的模块之一，但我们将需要多个图像来创建轮播。 我将在本文后面提供的代码将一次显示 5 张图像，因此我们至少需要 6 张图像才能使我们的轮播按钮产生任何效果并滑动我们的内容。
使用 Divi 的克隆功能，根据您希望图像在轮播中显示的次数复制图像模块。
完成后，您的部分应如下所示，图像模块堆叠在一行中。
您将需要打开每个模块的设置，如果添加了图片和 URL，则将其换出。
内容设置完成，现在我们要创建导航。
添加新版块
在图像部分的正下方添加一个新部分，这次有两列。
打开行设置并在高级选项卡的 CSS 类字段中添加类ds-arrow-row 。 然后保存并退出该行。
添加导航
接下来，向该行的两列中的每一列添加一个文本模块。
现在我们需要创建输入字段来充当我们的导航按钮。 打开左列和内容区域中的文本模块，粘贴以下 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 的唯一 ID，这样我们既可以使用 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) x 100 = 300。
因此，您需要将 1000vw 值更改为至少 300vw。 （插入更大的数字并不重要，因为 JavaScript 将负责不显示任何额外的空页面）。 因此，您调整后的 CSS 将如下所示：
/*Set the row width*/
.ds-carousel-row {
overflow: hidden;
width: 300vw;
max-width: 300vw;
}对于媒体查询，情况略有不同。 由于 CSS 被配置为在 1024 像素及以下宽的屏幕上每页显示 3 张图像，而在 479 像素或以下宽的屏幕上每页显示 1 张图像，我们需要调整数学以反映：
(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 > Theme Options > Integrations > Add code to the < head > your blog 并确保保存。
<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 选项会自动添加更适合轮播布局的样式。
现在我们需要在“内容”选项卡中调整一些设置。
对于第一个模块，我们需要将 Posts Number 设置为 1，并将 Offset Number 设置为 0。
如何调整其余设置以及显示哪些内容完全取决于您。 然后保存退出。
正如我们之前所做的那样，使用 Divi 的克隆功能根据需要多次复制模块。
获得所需的博客模块数量后，打开每个模块并将偏移量每次增加 1，以便每个博客模块显示提要中的下一篇文章。
所以你的设置看起来像这样：
第一个 = 偏移量：0
第二个 = 偏移量：1
第 3 个 = 偏移量：2
第 4 个 = 偏移量：3
等等。
一点额外的 CSS
当使用 Grid 格式时，博客模块显示在列中，我们需要将此额外的媒体查询添加到我们的 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;
}
}如果您决定在全角模式下使用 blog 模块，则不需要添加它。
结果
现在检查您的页面并查看您可爱的新博客轮播
最后的想法
有很多方法可以使用这种轮播效果来显示更多内容而不增加页面长度。
您可以展示您的网站设计、客户推荐、员工传记、视频、播客甚至您商店的产品。
我很想听听您如何使用本教程来创建 Divi 模块的可点击轮播，所以请在下面的部分发表评论！
精选图片来自 aunaauna / Shutterstock.com