使用 Slick.js 將輪播加入您的網站
- WBOY轉載
- 2023-09-04 20:37:021175瀏覽
在本教學中，我們將示範如何使用 Slick.js 來處理輪播，然後將它們新增到您的網站。我們將從創建一個簡單的圖像輪播開始，並提供基本的滾動功能，然後慢慢地根據我們的需求向輪播添加不同的屬性，對輪播進行一些更改。
如果您嘗試在不使用任何程式庫的情況下建立輪播，這將非常耗時。為了減少工作量並能夠添加具有不同屬性的多種類型的輪播，您可以使用 slick.js。
Slick.js 是一個非常著名且廣泛使用的 jQuery 插件，它允許我們創建具有多個屬性和不同屬性的響應式輪播。
Slick 的功能
Slick.js 成為輪播的完美選擇有多種原因。下面提到了其中一些原因 -
它提供了完全響應式輪播。
輪播隨其容器縮放。
它允許您使用不同的斷點進行單獨的設定。
是否包含 CSS3，由您選擇。
支援桌面滑鼠拖曳。
存在無限迴圈。
與創建輪播的傳統方式相比，這些是 Slick 為我們提供的一些流行功能。
使用 Slick 建立輪播
現在我們已經熟悉了 Slick，是時候學習如何使用它來創建輪播了。創建輪播的第一步是擁有一個 HTML 文件和一個 CSS 文件，因為在這些文件中，我們將為我們的網站編寫邏輯，該網站也將包含輪播。
執行以下命令 -
touch index.html styles.css
在上面的指令中，我們建立了兩個文件，即index.html和styles.css。
注意 - 可能index.html可能無法在您的機器上運行，請使用vi命令建立這兩個檔案.
現在，讓我們來寫一個建立一個非常基本的輪播所需的 HTML 程式碼。
index.html
#範例
<html>
<head>
<title> Slick Carousel - Example</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick-theme.css" />
<style>
html,
body {
background-color: #7b6e6d;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>Slick Carousel - Example
<div class="carousel">
<div>
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk" style="max-width:90%" style="max-width:90%" alt="使用 Slick.js 將輪播加入您的網站">
</div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" style="max-width:90%" style="max-width:90%" alt="Image-2">
</div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" style="max-width:90%" style="max-width:90%" alt="Image-3">
</div>
<div>
<img src="https://www.tutorialspoint.com/css/images/css-mini-logo.jpg?hmac=AW_7mARdoPWuI7sr6SG8t-2fScyyewuNscwMWtQRawU" style="max-width:90%" style="max-width:90%" alt="Image-4">
</div>
<div>
<img src="https://www.tutorialspoint.com/dom/images/dom-mini-logo.jpg?hmac=Jo3ofatg0fee3HGOliAIIkcg4KGXC8UOTO1dm5qIIPc" style="max-width:90%" style="max-width:90%" alt="Image-5">
</div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ" style="max-width:90%" style="max-width:90%" alt="Image-6">
</div>
<div>
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=zEuPfX7t6U866nzXjWF41bf-uxkKOnf1dDrHXmhcK-Q" style="max-width:90%" style="max-width:90%" alt="Image-7"> </div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" style="max-width:90%" style="max-width:90%" alt="Image-8"> </div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=Tn9CS_V7lFSMMgAI5k1M38Mdj-YEJR9dPJCyeXNpnZc" style="max-width:90%" style="max-width:90%" alt="Image-9"> </div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=fZe213BcO2KPQEJKChsdHnVYg-6kAtQMTZV24f1fS94" style="max-width:90%" style="max-width:90%" alt="使用 Slick.js 將輪播加入您的網站0"> </div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 2,
autoplay: true,
});
});
</script>
</body>
</html>
說明
好的，困難的部分結束了。讓我們專注於如何在 index.html 檔案中使用 Slick 以及我們使用的屬性和特性。
使用 Slick 時的第一件事是能夠安裝它或使其在我們的程式碼中可用，我們可以透過不同的方式來做到這一點。最簡單的方法是使用 CDN 鏈接，這就是我在 html 檔案中所做的。
以下程式碼片段顯示了 index.html 檔案的 head 標籤中存在的兩個 CDN。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick-theme.css" />
然後我們還需要在 HTML 中加入更多 CDN，但不是在 head 中， 而是在 body 標籤內。考慮下面顯示的程式碼片段。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-migrate1.2.1.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>
在上面的程式碼片段中，我們匯入了 jQuery 依賴項以及用於新增 js 功能的 slick.min.js。
現在到了有趣的部分，我們需要使用Slick，為此，你可以看到我創建了一個名為carousel 的類，其中有多個div b> 包含具有指定高度和寬度的不同影像。
名為carousel 的類別在body 標籤內的script 標籤內使用，我們在其中建立一個jQuery 函數，然後使用「$」運算子和slick 作為我們傳遞單一設定屬性的方法，即slidesToShow: 2，，它告訴Slick 我們只想一次顯示2 張投影片。
現在，如果我們在瀏覽器中運行index.html 文件，我們應該能夠看到不同圖像的輪播，其中在特定時刻顯示2 個圖像，並且我們還可以移動到按影像左右中央的箭頭按鈕即可顯示下一組影像。
向輪播添加有趣的屬性
這樣，我們的基本輪播就完成了。現在我們來談談添加有趣的屬性來更改輪播的行為，這可以透過在我們的 ".slick({})" 方法中加入設定屬性來完成。
假設我們也希望輪播的使用者有一個點選項，他可以在其中點擊然後轉到特定映像，這可以透過新增 dots 屬性來完成。請參閱下面所示的程式碼片段。
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2, dots: true,
});
});
如果我們用上面顯示的程式碼片段取代先前的 ".ready()" 方法，那麼我們將能夠在瀏覽器中看到輪播下方出現不同數量的點。
我們也可以透過新增 dotsClass 屬性來更改點的類型或類別，如下所示：
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2,
dots: true,
dotsClass: 'slick-dots',
});
});
有多個可用的dotClasses，最受歡迎的是 -
光滑點
光滑輪播
#光滑活躍
您可能在網站上的不同輪播中看到的輪播最重要的功能之一是自動播放功能，在該功能中您可以看到輪播自動運行，而無需點擊按鈕，然後移至下一個圖片或div，，這可以在Slick.js 中藉助autoPlay 輕鬆完成財產。請參閱下面所示的程式碼片段。
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2,
dots: true,
dotsClass: 'slick-dots',
autoplay: true,
autoplaySpeed: 1000,
});
});
在上面的代码片段中，我们添加了具有不同属性的 Slick，其中之一是 autoplay 属性以及 autoplaySpeed，它告诉我们在什么情况下显示下一个图像或 div 的时间，在我们的例子中，为 1000 毫秒。
如果运行 HTML 代码，您将看到轮播将处于自动播放模式，图像每 1000 毫秒或 1 秒更改一次。
结论
在本教程中，我们演示了如何使用 Slick.js 创建您选择的轮播并将其添加到您的网站上。
以上是使用 Slick.js 將輪播加入您的網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！