*swiper.min.js*插件实现多种滑动效果,可在pc、手机、平板中使用 [Swiper中文网-轮播图幻灯片js插件,H5页面前端开发](https://www.swiper.com.cn/) http://www.swiper.com.cn/（版本3）、http://2.swiper.com.cn/（版本2.X） http://bbs.swiper.com.cn/forum.php [Swiper演示 - Swiper中文网](https://www.swiper.com.cn/demo/index.html) [Swiper插件的基本使用方法和案例\_王同学要努力的博客-CSDN博客\_swiper案例](https://blog.csdn.net/m0_46374969/article/details/118599004) ``` <div class="swiper banner"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/组 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/组 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/组 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/组 2140@3x.png" alt=""></div> <div class="swiper-slide"><img src="./img/组 2140@3x.png" alt=""></div> </div> <div class="swiper-pagination"></div> </div> <script type="text/javascript"> var mySwiper = new Swiper('.banner', { initialSlide:0,//设定初始化时slide的索引。Swiper默认初始化时显示第一个slide direction:"horizontal",//wiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical speed:300,//切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间 autoplay: true,//可选选项，自动滑动 loop:true, //是否循环 // 如果需要分页器 pagination: { el:'.swiper-pagination', type:'fraction', }, paginationClickable :true, // 如果需要前进后退按钮 // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev' }) </script> ``` ``` <div class="swiper banner"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="./img/123333@2x.png" alt=""></div> <div class="swiper-slide"><img src="./img/123333@2x.png" alt=""></div> <div class="swiper-slide"><img src="./img/123333@2x.png" alt=""></div> </div> <div class="swiper-pagination1"></div> </div> ``` ``` var mySwiper = new Swiper('.banner', { initialSlide:0,//设定初始化时slide的索引。Swiper默认初始化时显示第一个slide direction:"horizontal",//wiper的滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical breakpoints:"",//可使用断点（breakpoints,4.5.0后）如设置不同分辨率下的切换方向 也可可使用 swiper.changeDirection() 方法动态更改切换方向 speed:300,//切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间 grabCursor:false,//该选项给Swiper 使用者提供小小的贴心应用，设置为true 时，鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同） watchSlidesProgress:false,//开启这个参数来计算每个slide的progress 当前活跃的slider值为0 setWrapperSize:false,//使用flexbox布局 virtualTranslate:false,//虚拟的位移 Slide不会移动，但是Swiper还是在运行 //width:"",//强制Swiper的宽度(px)这个参数会使自适应失效 //height:"",//强制Swiper的高度(px)这个参数会使自适应失效 roundLengths:false,//如果设置为true，则将slide的宽和高取整(四舍五入) breakpointsBase:"window",//设置断点功能（breakpoints）的计算基准。可以设为 window 或 container autoHeight:false,//自动高度。设置为 true 时，wrapper 和container 会随着当前slide 的高度而发生变化 uniqueNavElements:true,//当存在多个同名导航元素时，设置导航元素是否唯一。导航元素包括分页器，按钮和滚动条 nested:false,//true 时用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换 watchOverflow:false,//当没有足够的slide切换时，例如只有1个slide，swiper会失效且隐藏导航等。默认不开启这个功能loop模式无效，因为会复制slide runCallbacksOnInit:true,//如果你的初始化slide不是第一个(例initialSlide:2)或者设置了loop: true，那么初始化时会触发一次 [Transition/SlideChange] [Start/End] 回调函 init:true,//当你创建一个Swiper实例时是否立即初始化如果禁止了，可以稍后使用 mySwiper.init() 来初始化 on:"",//注册事件，Swiper4.0开始使用关键词this指代Swiper实例 on:{slideChange:function(){}} 或者mySwiper.on('slideChange', function () {}) preloadImages:true,//默认为true，Swiper会强制加载所有图片后才初始化 updateOnImagesReady:true,//当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true cssMode:false,//启用后，它将使用现代CSS Scroll Snap API updateOnWindowResize:true,//默认当窗口(window) 尺寸发生变化时，比如屏幕旋转，Swiper会更新和重新计算(update和breakpoints等) enabled:true,//设置Swiper初始时是否可用，默认是可用(true)。当Swiper被禁用时，它将隐藏所有导航元素（分页器、按钮、滚动条）并且不会响应任何事件和交互后面可通过函数 enable() 和 disable() 动态启用或禁用Swiper createElements:false,//自动创建元素。启用后，Swiper 将使用 swiper-wrapper 元素自动包装slides，并为启用的导航、分页器和滚动条创建所需的元素（使用它们各自的参数对象或使用true）） rewind:false,//设置为true启用“倒带”模式 maxBackfaceHiddenSlides:10,//如果slide 总数小于此处指定的值，则 Swiper 将 backface-visibility: hidden 在slide 上启用以减少 Safari 中的视觉“闪烁”。这种闪烁可能会出现在大于2000像素的Safari 中 modules:"",//在项目中引入swiper 时，需要用到的 Swiper 模块 autoplay: true,//可选选项，自动滑动 loop:true, //是否循环 // 如果需要分页器 pagination: { el:'.swiper-pagination1', type:'custom', renderCustom: function (swiper, current, total) { var html=""; for (var i = 1; i <= total; i++) { if(i==current){ html+='<div class="swiper-p-bullet swiper-p-active"></div>'; }else{ html+='<div class="swiper-p-bullet"></div>'; } } return html; }, }, paginationClickable :true, // 如果需要前进后退按钮 // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev' }) ``` 设置分页的样式 ``` .swiper-pagination-custom{ z-index: 2; position: absolute; text-align: center; // left: (106/@vw); // bottom: (9/@vw); } .swiper-p-bullet { width: (30/@vw); height: (3/@vw); display: inline-block; border-radius: (1.5/@vw); opacity: .12; background-color: #FFFFFF; margin: 0 (13/@vw); } .swiper-p-active{ width: (30/@vw); height: (3/@vw); display: inline-block; border-radius: (1.5/@vw); background: #04C4C9; opacity: 1; } ```