前端好用插件----Swiper（滑动、滚动等）

前言

最近开发中使用到了Swiper这个插件发现该插件真的挺好用的，它免费开源稳定，使用起来又简单又方便，文档十分详细，对于手机、电脑网页大部分滑动功能、焦点图、tab、触摸导航等都能很好的适配。不论你是使用H5开发还是使用vue、react官网都有很详细的教程，以下是该插件的官网地址：https://www.swiper.com.cn/

1.使用方法：

1. 加载插件两个必须的文件swiper-bundle.min.js和swiper-bundle.min.css，注意：需要根据安装的版本使用对应的文件名；这里支持下载swiper或者CND。
2. 添加需求的HTML内容，Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。注：一般默认class为swiper（容器名称）、swiper-wrapper（内容名称）、swiper-pagination（分页器名称）、swiper-button-prev（导航按钮-前进）、swiper-button-next（导航按钮-后退）；版本不同默认名称可能不同，更多内容可以多看看官方文档。
3. 定义样式，经典例子：

.swiper { 
   width: 600px;
   height: 300px; 
}

4.初始化Swiper：

<script> 
var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项 
    loop: true, // 循环模式选项 
    // 如果需要分页器
    pagination: { el: '.swiper-pagination', }, 
    // 如果需要前进后退按钮 
    navigation: { nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev', },

    // 如果需要滚动条 
    scrollbar: { 
         el: '.swiper-scrollbar', 
    }, 
}) 
</script>

5.其他方式引入

2. 主要用途：

1. 功能：轮播、滚动、切换、滑动等

效果示例网址：www.swiper.com.cn/demo/senior…

2. 效果图： 手机效果图：

ipad效果图：

电脑效果图：

3.其他的配置选项

按照官走就好了，需要什么功能直接设置就行了，地址：www.swiper.com.cn/api/index.h…