在本教程中，我们将学习使用JavaScript中的Slick为创建轮播。

单击此处访问Slick GitHub存储库。 https://github.com/kenwheeler/slick/

例

安装

从Slick GitHub存储库获取最新版本。

获取最新版本的jQuery。

步骤1：包含jQuery

在页面中包含jQuery 1.7+版本。

<script src="path/to/jquery.min.js"></script>

第2步：包含平滑脚本

在页面中包含slick.js脚本。

<script src="path/to/slick.min.js"></script>

第3步：添加漂亮的样式表

在页面中包含样式表。

<link rel="stylesheet" href="path/to/slick.min.css">

可选，添加光滑主题。

<link rel="stylesheet" href="path/to/slick-theme.css">

步骤4：建立HTML标记

在给定的示例中，我们使用5张图片。

<div id="slick-images">
  <div><img src=&apos;cat1.jpg&apos;></div>
  <div><img src=&apos;cat2.jpg&apos;></div>
  <div><img src=&apos;cat3.jpg&apos;></div>
  <div><img src=&apos;cat4.jpg&apos;></div>
  <div><img src=&apos;cat5.jpg&apos;></div>
</div>

步骤5：配置Slick

现在，我们将编写JavaScript代码来配置Slick。
我们可以将代码放在script标签内HTML页面中，也可以创建单独的.js文件并将其包含在页面中。

$("#slick-images").slick({
	dots: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	autoplay: true,
	autoplaySpeed: 2000,
	responsive: [
		{
			breakpoint: 1024,
			settings: {
				slidesToShow: 3,
				slidesToScroll: 3,
			}
		},
		{
			breakpoint: 600,
			settings: {
				slidesToShow: 2,
				slidesToScroll: 2
			}
		},
		{
			breakpoint: 480,
			settings: {
				slidesToShow: 1,
				slidesToScroll: 1
			}
		}
	]
});

在上面的示例中，我们使用jQuery。

我们选择ID为" slick-images"的div，然后将slick附加到它上。
上面示例中的配置选项不言自明。

我们将" dots"设置为" true"，这意味着我们将在图像下方显示这些点。

slidesToShow设置为3，即在任何时候我们都会显示3张幻灯片。

slidesToScroll设置为1，即在任何时候都只滚动一张幻灯片。

autoplay设置为true，它将自动滚动。

autoplaySpeed设置为2000，以毫秒为单位。
这是自动滚动的速度，即在2000毫秒(或者2秒)后，幻灯片将滚动。

响应式是一个包含断点和设置的数组。
因此，随着我们减少浏览器宽度的增加，要显示的幻灯片数量将增加或者减少。