如何使用 Divi 和 Slick.js 創建自動輪播

已發表: 2019-09-11

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi、Slick.js 和冰淇淋店佈局包創建自動輪播。 我們將首先在我們的網站中包含漂亮的 JS 庫，然後繼續使其在 Divi Builder 中工作。 這是為您想要展示的任何類型的模塊創建自動輪播的好方法。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

自動轉盤

移動的

自動轉盤

免費下載自動輪播佈局

要使用免費的自動輪播佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件
免費下載

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

確保在 head 標籤中包含 Slick.js 文件！ 沒有它，它將無法工作。 請參閱下面的第一步。

1. 將 Slick JS 添加到您的 Divi 主題集成中

轉到 Divi 主題選項

本教程的第一部分非常重要； 將 Slick.js 添加到您的網站。 為此，請轉到您的 Divi 主題選項。

自動轉盤

將 Slick.js 添加到 Head 標籤

導航到集成選項卡並將 Slick.js 文件添加到您網站的 head 標籤。 

<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.2em

自動轉盤

漿紗

也修改模塊的大小設置。

  • 最大寬度：800px
  • 模塊對齊：居中

自動轉盤

3. 將新的一列行專用於自動滑塊

添加新行

列結構

要創建自動輪播，我們需要將一個新行專用於我們想要放置在輪播中的項目。 確保選擇只有一列的行。 在接下來的步驟中，我們將此列轉換為自動輪播。

自動轉盤

漿紗

在不添加任何模塊的情況下，打開行設置並允許行在大小設置中佔據屏幕的整個寬度。

  • 寬度：100%
  • 最大寬度：100%

自動轉盤

間距

添加一些頂部邊距，然後刪除所有默認的頂部和底部填充。

  • 上邊距：50px
  • 頂部填充：0px
  • 底部填充：0px

自動轉盤

溢出

我們還通過隱藏溢出來確保沒有任何內容超出行容器。

  • 水平溢出：隱藏
  • 垂直溢出：隱藏

自動轉盤

列設置

繼續打開列設置。

自動轉盤

CSS 類

向該列添加兩個不同的 CSS 類。 確保在它們之間留出空間。 在本教程的後面，我們將使用這些類來創建自動輪播。

  • CSS 類：冰淇淋項目滑塊

自動轉盤

將第一個滑塊項添加到列（號召性用語模塊）

默認內容

是時候開始添加第一個輪播項目了！ 我們將使用號召性用語模塊，但您可以隨意使用您選擇的任何其他模塊。 輸入您選擇的一些內容。

自動轉盤

懸停內容

將標題和正文內容替換為空字符（例如：' '）以刪除懸停時的內容。

自動轉盤

關聯

確保您還添加了指向模塊的鏈接，以便顯示按鈕。

  • 按鈕鏈接網址：#

自動轉盤

默認漸變背景

然後，轉到背景設置並添加漸變背景。

  • 顏色 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（懸停）
  • 按鈕邊框寬度：0px

自動轉盤

  • 按鈕邊框半徑：0px
  • 按鈕字母間距：2px
  • 按鈕字體：提示
  • 按鈕字體粗細：常規
  • 按鈕字體樣式：大寫

自動轉盤

  • 上邊距：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 和 Ice Cream Shop Layout Pack 創建自動輪播。 這是向您的網站添加交互的好方法。 您可以使這種技術適用於您想要顯示的任何類型的模塊！ 如果您有任何問題或建議，請務必在下面的評論部分留言。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。