石景山网络建设：如何创建Divi模块的可点击旋转体

2019.05.24 石景山网络建设

134

今天的文章是由Divi Soup的Michelle Nunan提交的，Divi Kitchen的家，在石景山网络建设她不断地编写新的和有用的Divi教程和资源。

传送带是一个受欢迎的网站功能。它们允许您在不占用额外空间的情况下显示更多的内容，并且它们还为您的网站添加了一个交互元素，这可以鼓励您的访问者更多地参与您的内容。

有许多伟大的插件可以帮助您在旋转木马中显示内容，但在这篇文章中，我将向您展示如何使用CSS和Javascript创建Divi模块的可点击旋转木马。

这种效果几乎可以用于任何标准的Divi模块，或模块的组合。我将向您展示如何使用图像模块创建这个旋转木马，然后以博客模块为处理过程，略有不同。从这里，您应该了解如何使用几乎任何标准模块创建自己的旋转木马。

结果

这就是在使用博客模块创建一个旋转木马之后应该得到的结果。

你可以看到现场演示使用各种DiviBuilder模块显示效果。

我们开始吧。

添加一个新页面

我们将首先创建一个带有图像模块的旋转木马。添加新页或打开要向其中添加旋转木马的页。

添加一个新的部分

用一列向页面添加一个新的标准部分。然后打开节设置，在“高级”选项卡中添加类旋转木马-剖面在CSS类字段中。

由于我们将改变部分和行的显示方式，我们只希望这些更改应用于我们的旋转木马，因此我们添加了一个自定义类，以防止代码影响站点上的任何其他元素。

然后保存并退出该部分。

现在打开行设置，在“高级”选项卡中添加类传送带在CSS类字段中。然后保存并退出行。

接下来，我们将向行添加一个图像模块。单击“插入模块”并从列表中选择“图像模块”。

在图像模块的“内容”选项卡中，单击“上载图像”，然后从媒体库中选择所需的图像或上载新的图像。

如果您希望您的图像在一个照明盒中打开，那么在设置中选择此选项。

或者，如果您愿意，可以在单击图像时添加一个url来打开一个新页面。

我们对模块所做的最后一件事就是添加一个类。单击“高级”选项卡并添加类ds-carousel-模组在CSS类字段中。然后保存并退出模块。

这是我们的模块之一，但我们需要更多的图像来创建旋转木马。我将在这篇文章后面提供的代码将一次显示5张图像，因此我们需要至少6张图片才能使我们的旋转木马按钮产生任何效果并滑动我们的内容。

使用Divi的克隆功能，将图像模块复制多少次，就像您希望图像显示在旋转木马中一样。

完成后，您的部分应该如下所示，您的图像模块堆放在一行中。

您将需要打开每个模块的设置，并交换您的图像和URL，如果您添加它。

这是内容的设置完成，现在我们要创建导航。

添加一个新的部分

添加一个新的部分，直接在您的图像部分，这一次有两列。

打开行设置并在“高级”选项卡中添加类DS-箭头行在CSS类字段中。然后保存并退出行。

添加导航

接下来，向该行中的两列中的每一列添加一个文本模块。

现在，我们需要创建作为导航按钮的输入字段。在左列和内容区域打开文本模块，粘贴以下HTML：

01	<input id="ds-arrow-left" type="button" value="8">

然后保存并退出模块。

接下来，在右边的列中打开文本模块，粘贴以下HTML：

01	<input id="ds-arrow-right" type="button" value="9">

然后保存并退出模块。

石景山网络建设给出这些输入字段的唯一ID。DS-箭头-左和右箭头因此，我们既可以用CSS对它们进行样式化，也可以使用JavaScript对它们进行定位，以告诉他们我们希望它们在被单击时做些什么。

8和9的值引用ET模块字体族.

这就是我们在建筑商所要做的。如果你现在检查你的页面的前端，它将仅仅是一列图片，然后是两个带有8和9的小灰色按钮，他们不会做任何事情。因此，让我们开始有趣的部分，添加我们的代码。

添加CSS

我建议将下面的CSS添加到您的子主题中，但是如果您没有使用子主题，那么可以添加到Divi>ThemeOptions>General>Custom CSS并确保点击Save。

100

101

102

103

104

/*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。

因此，您需要将1000 vw值更改为最少300 vw。(如果插入更多的内容并不重要，因为JavaScript将处理不显示任何额外的空页面)。因此，调整后的CSS如下所示：

/*Set the row width*/

.ds-carousel-row {

overflow: hidden;

width: 300vw;

max-width: 300vw;

}

对于媒体查询，情况略有不同。由于CSS被配置为在1024 px宽或更小的屏幕上显示每页3幅图像，在479 px宽或更小的屏幕上每页显示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;

}

如果您愿意，只需将所有这些值修改为比为简单起见使用的模块总数还要大的宽度即可。因此，在石景山网络建设中，该值将为1500 vw或更多。

您还可能希望更改每页显示的模块数。这个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;

}

宽度值为20 vw，每页显示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>ThemeOptions>Integrations>将代码添加到博客的<head>中，并确保保存。

(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_visual=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构建器模块中使用此方法，但是您可能需要使用设计用于显示某种提要的模块(如blog模块)来调整设置。

当博客模块输入文章并显示在多列中(当使用网格功能时)，这将需要调整模块设置和少量额外的CSS。

使用博客模块的旋转木马

按照相同的步骤设置节和行。

而不是添加图像模块，选择博客模块并添加ds-carousel-模组在模块设置的“高级”选项卡中初始化。

接下来，在“设计”选项卡中，从“布局”下拉列表中选择“网格”。

如果您愿意的话，可以将其保留为全宽度，但是Grid选项会自动添加更适合旋转木马布局的样式。

现在，石景山网络建设需要调整内容选项卡中的一些设置。

对于第一个模块，我们需要将POST编号设置为1，偏移号设置为0。
如何调整其余设置以及显示哪些内容完全取决于您。然后保存并退出。

正如我们之前所做的，使用Divi的克隆功能可以根据需要复制模块的次数。

一旦你有了你需要的博客模块的数量，打开每个模块，每次增加一个偏移量，这样每个博客模块就会在提要中显示下一篇文章。

所以你的设置应该是这样的：

1=偏移号：0
2=偏移号：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;

}

如果您决定在全宽模式下使用博客模块，则不需要添加此模块。

结果

现在查看您的页面，并查看您可爱的新博客旋转木马。

最后思想

有很多方法可以使用这个旋转木马效果来显示更多的内容，而不增加页面的长度。

你可以展示你的网站设计，客户推荐信，员工传记，视频，播客，甚至你的商店的产品。

我想听听你如何使用本教程来创建一个可点击的Divi模块旋转木马，所以请在石景山网络建设下面一节中留下评论！

石景山网络建设：如何创建Divi模块的可点击旋转体

结果

添加一个新页面

添加一个新的部分

添加一个新的部分

添加导航

添加CSS

根据需要编辑CSS

添加JavaScript

使用博客模块的旋转木马

额外的CSS

结果

最后思想

相关推荐