简介
slick-browserify-js 是一个基于 JavaScript 的轻量级的滑动轮播库，其主要是通过 Browserify 转译的 Slick。它可以方便地用于前端页面的开发，提供了丰富的 API 接口以及对 IE6+ 浏览器的支持。本文将介绍如何使用 slick-browserify-js 库。
安装
在项目根目录下，执行以下命令：
npm install slick-browserify-js --save
使用
首先，我们需要引入 slick-browserify-js：
import slick from 'slick-browserify-js';
然后，在 HTML 中添加需要轮播的元素，这里以 div.slider 为例：
<div class="slider"> <div><img src="1.jpg" alt="" /></div> <div><img src="2.jpg" alt="" /></div> <div><img src="3.jpg" alt="" /></div> </div>
接着，在 JavaScript 中调用 slick 的初始化方法即可：
$(document).ready(function() {
$('.slider').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true
});
});API
slick-browserify-js 提供了丰富的 API 接口，包括 butons, arrows, autoplay等等。下面是一些常用的选项：
autoplay
是否自动播放，boolean，默认为 false。
$('.slider').slick({
autoplay: true
});autoplaySpeed
自动播放速度，单位为毫秒，number，默认为 3000。
$('.slider').slick({
autoplaySpeed: 2000
});dots
是否显示小圆点导航，boolean，默认为 false。
$('.slider').slick({
dots: true
});infinite
是否无限循环滑动，boolean，默认为 true。
$('.slider').slick({
infinite: false
});speed
滑动速度，单位为毫秒，number，默认为 300。
$('.slider').slick({
speed: 500
});slidesToShow
一次滑动的数量，number，默认为 1。
$('.slider').slick({
slidesToShow: 2
});slidesToScroll
每次滑动的数量，number，默认为 1。
$('.slider').slick({
slidesToScroll: 2
});示例
下面是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ---------- -- ----- -------------
----- ---------------- ------------------------------------------------------------------------
----- ---------------- ------------------------------------------------------------------------------------------- --
-------
------- --- -
------- ------
------- -----
-
--------
-------
------
---- ------------------
---- ------------
---- ---------------- ------
---- ---------------
--------- ---------------------------------------------------- ------ --------
--------- ---------------------------------------------------- ------ --------
--------- ---------------------------------------------------- ------ --------
--------- ---------------------------------------------------- ------ --------
------
------
------
------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------
--------
---------------------------- -
--------------------
--------- -----
-------------- -----
----- -----
--------- -----
------ ----
------------- --
--------------- -
---
---
---------
-------
-------结论
slick-browserify-js 是一个非常方便好用的滑动轮播库，支持众多的 API 接口，功能齐全。其使用也十分简单，只需要在 HTML 中添加元素，并在 JavaScript 中调用初始化方法即可。推荐在前端开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555e581e8991b448d2f1f