Swiper.js 怎么用

Swiper.js是一个用于创建滑动轮播图的JavaScript库。根据提供的引用内容，可以看出Swiper.js的使用方法有多种。

首先，可以通过安装Swiper库并引入Swiper和SwiperSlide组件来创建一个基本的Swiper轮播图。可以设置initialSlide属性来指定初始显示的幻灯片，设置loop属性来实现循环播放。通过onSlideChange和onSwiper属性可以监听滑动事件和获取Swiper实例。\[2\]

其次，可以使用Swiper的导航模块来添加导航按钮。通过设置navigation属性，可以指定上下滑动的导航按钮的类名，然后在对应的类名下添加图片元素作为导航按钮。\[3\]

最后，还可以使用Swiper的竖向滑动功能。通过设置direction属性为"vertical"，可以实现竖向滑动效果。可以使用slidesPerView属性来设置每次滑动显示的幻灯片数量，使用speed属性来设置滑动速度。可以通过onTouchEnd事件监听滑动结束，并根据滑动方向执行相应的操作。\[1\]

综上所述，Swiper.js可以通过安装和引入库、设置属性和事件监听来实现不同的功能，包括创建基本的轮播图、添加导航按钮和实现竖向滑动效果。
#### 引用[.reference_title]
- *1* *2* *3* [react 中 swiper.js 的使用](https://blog.csdn.net/weixin_44205605/article/details/119895387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]