介绍
vue2-swiper 是一个 Vue.js 2.x 的轮播插件。它支持无限循环、强大的自定义 API 和事件、移动设备兼容、自适应布局等功能。
如果你需要一个简单易用的轮播插件，vue2-swiper 可以成为你的选择。
安装
vue2-swiper 的安装非常简单，可以通过 npm 来安装：
--- ------- ----------- ------
使用
在你的 Vue.js 工程中引入 vue2-swiper：
------ ---------- ---- -------------- ------ ----------------------------------- --------------------
接下来就可以在你的组件中使用了。比如：
----------
-----
------- ------------------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
---------
------
-----------
--------
------ ------- -
------ -
------ -
------------- -
----------- -
--- ---------------------
---------- -----
--
----------- -
------- ----------------------
------- ----------------------
--
--
--
--
--
---------
-------
-- -------- --
------------------ -
--------- ---------
------- -----
----- ----
---------- -----------------
-
--------属性
options
你可以通过 options 来配置 swiper。options 的具体配置项可以参见 Swiper API。
------- ------------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
------ -
------ -
-------- -
-------------- --
------------- ---
----------- -
------- ----------------------
------- ----------------------
--
--
--
--speed
轮播的速度，单位为毫秒。默认为 300。
------- -------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
loop
是否循环播放。默认为 false。
------- ------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
autoplay
是否自动播放。默认为 false。
------- ----------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
full-screen
是否全屏展示。默认为 false。
------- -------------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
direction
轮播的方向。默认为 horizontal。
------- ------------------------ ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
show-scrollbar
是否显示滚动条。默认为 false。
------- ----------------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
事件
vue2-swiper 支持多个事件。这里列举几个常用的事件。
slideChange
当幻灯片切换结束时触发。
------- --------------------------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
-------- -
------------------- -
------------------ ---------
--
--transitionEnd
当滑动过渡结束时触发。
------- ------------------------------------- ------------------- ---------------- ------------------- ---------------- ------------------- ---------------- ---------
-------- -
--------------------- -
----------------------- ------
--
--例子
下面给出一个例子，它展示了轮播的基本用法，以及如何使用 options 来自定义轮播：
----------
-----
------- ------------------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
---------
------
-----------
--------
------ ------- -
------ -
------ -
------------- -
--------- -
------ -----
--------------------- ------
--
----------- -
--- ---------------------
---------- -----
--
----------- -
------- ----------------------
------- ----------------------
--
--
--
--
--
---------
------ -------
-- -------- --
------------------ -
--------- ---------
------- -----
----- ----
---------- -----------------
-
--------延伸学习
如果您需要对 vue2-swiper 进行深入学习，可以参考官方文档 vue-swiper 。
此外，如果您要开发一个 Vue.js 项目，您可以参考 Vue.js 中文文档 了解更多相关知识。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005665281e8991b448e2769