資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 Slick.js 將輪播新增到您的網站
在本教程中，我們將演示如何使用 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://tutorialspoint.tw/javascript/images/javascript-mini-logo.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk" width="300" height="235" alt="Image-1">
</div>
<div>
<img src="https://tutorialspoint.tw/java/images/java-mini-logo.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" width="300" height="235" alt="Image-2">
</div>
<div>
<img src="https://tutorialspoint.tw/html/images/html-mini-logo.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" width="300" height="235" alt="Image-3">
</div>
<div>
<img src="https://tutorialspoint.tw/css/images/css-mini-logo.jpg?hmac=AW_7mARdoPWuI7sr6SG8t-2fScyyewuNscwMWtQRawU" width="300" height="235" alt="Image-4">
</div>
<div>
<img src="https://tutorialspoint.tw/dom/images/dom-mini-logo.jpg?hmac=Jo3ofatg0fee3HGOliAIIkcg4KGXC8UOTO1dm5qIIPc" width="300" height="235" alt="Image-5">
</div>
<div>
<img src="https://tutorialspoint.tw/python/images/python-mini.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ" width="300" height="235" alt="Image-6">
</div>
<div>
<img src="https://tutorialspoint.tw/javascript/images/javascript-mini-logo.jpg?hmac=zEuPfX7t6U866nzXjWF41bf-uxkKOnf1dDrHXmhcK-Q" width="300" height="235" alt="Image-7"> </div>
<div>
<img src="https://tutorialspoint.tw/java/images/java-mini-logo.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" width="300" height="235" alt="Image-8"> </div>
<div>
<img src="https://tutorialspoint.tw/html/images/html-mini-logo.jpg?hmac=Tn9CS_V7lFSMMgAI5k1M38Mdj-YEJR9dPJCyeXNpnZc" width="300" height="235" alt="Image-9"> </div>
<div>
<img src="https://tutorialspoint.tw/python/images/python-mini.jpg?hmac=fZe213BcO2KPQEJKChsdHnVYg-6kAtQMTZV24f1fS94" width="300" height="235" alt="Image-10"> </div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate1.2.1.min.js"></script>
<script type="text/javascript" src="//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="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>
在上面的程式碼片段中，我們正在匯入 jQuery 依賴項以及用於新增 js 功能的 slick.min.js。
現在到了有趣的部分，我們需要使用 Slick，為此，您可以看到我建立了一個名為 carousel 的類，其中包含多個包含不同影像的 div，並指定了高度和寬度。
名為 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 可用，最流行的是：
slick-dots
slick-carousel
slick-active
您可能在網站上不同輪播中看到的一個最重要的輪播功能是 自動播放 功能，在該功能中，您可以看到輪播自動執行，而無需您點選按鈕然後移動到下一張影像或 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 建立您選擇的輪播並將其新增到您的網站上。
1K+ 次瀏覽
