如何創建可點擊的 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