简介
cir-swipe 是一个基于 vanilla JavaScript 开发的全新 Swipe 组件，可以轻松实现移动端的轮播图功能。
安装
使用 npm 安装 cir-swipe：
npm install cir-swipe --save
使用方法
引入
在你的 html 文件中引入 cir-swipe：
<script src="./node_modules/cir-swipe/dist/cir-swipe.min.js"></script>
初始化
实例化 Swipe 对象：
const swiper = new Swipe(
".swiper-container",
{
// 选项
}
);第一个参数为容器的选择器，如果你的容器 class 为 swiper-container，那么选择器为 ".swiper-container"。
第二个参数为配置选项。可以配置的选项如下：
initialSlide：初始显示的 slide 索引，默认值为0。speed：切换速度，单位是毫秒，默认值为300。auto：是否开启自动播放，可以设置为一个时间间隔，单位是毫秒。例如：auto: 5000表示每 5 秒自动切换一次。loop：是否循环播放，默认为true。stopPropagation：是否停止事件冒泡，默认为false。disableScroll：是否禁止容器滚动，默认为true。on：自定义事件回调，支持beforeChange和afterChange。
HTML 结构
cir-swipe 的 HTML 结构如下：
-- -------------------- ---- -------
---- -------------------------
---- -----------------------
---- ---------------------
---- --- ------ ---
------
---- ---------------------
---- --- ------ ---
------
---- ---------------------
---- --- ------ ---
------
------
------CSS 样式
添加以下样式：
-- -------------------- ---- ------- ----------------- - --------- --------- --------- ------- - --------------- - -------- ----- ----------- --------- ---- --------- - ------------- - ------------ -- ------ ----- -
完整示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
---------------- ------------
-------
----------------- -
--------- ---------
--------- -------
------ -----
------- ------
-
--------------- -
-------- -----
----------- --------- ---- ---------
-
------------- -
------------ --
------ -----
------- -----
-
-------------------------- -
----------------- --------
-
-------------------------- -
----------------- --------
-
-------------------------- -
----------------- --------
-
-------------- -
--------- ---------
------- -----
----- --
------ --
----------- -------
-
-------------- ------ -
---------- -----
------------- -----
----------------- -----
------- --- ----- -----
-------------- ----
------ -----
------- -----
------- --------
----------- ------------ ---- ---------
-
-------------- ------------ -
------------- -----
-
--------
-------
------
---- -------------------------
---- -----------------------
---- ---------------------
---- --- ------ ---
---------------
------
---- ---------------------
---- --- ------ ---
---------------
------
---- ---------------------
---- --- ------ ---
---------------
------
------
---- ----------------------
------- --------------------------
------- --------------------------
------
------
------- --------------------------------------------------------------
--------
----- ------ - --- -------------------------- -
------------- --
------ ----
----- -----
----- -----
---------------- ------
-------------- -----
--- -
------------- ----------- --------- -- -
----------------------------- - ------
--
------------ ----------- --------- -- -
----------------------------- - ------
--
--
---
----- ------- - --------------------------------
----- ------- - --------------------------------
--------------------------------- -- -- -
--------------
---
--------------------------------- -- -- -
--------------
---
---------
-------
-------总结
使用 cir-swipe 组件，可以轻松实现移动端的轮播图功能。本文详细介绍了 cir-swipe 的安装、初始化、HTML 结构、CSS 样式和完整示例代码，希望能对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f71238a385564ab6764