这段时间在公司实习做前端，感觉前端没学习到很多前端框架，接口那些都是写好的，只需要调用就好，感觉没什么好记的，唯一觉得有必要记的就是swiper轮播了，在前端做网站的时候经常用到swiper做公告，图片的轮播效果。
一：要使用swiper首先要引入对应的swiper.min.css和swiper.min.js文件，这个直接进swiper中文网下载就好，里面也有很多很好的实例可以学习。
二：实例化swiper,以一个简单的实例化轮播举例，代码如下
var bannerSwiper = new Swiper('.banner-swiper', {//banner-swiper为取的别名 autoplay: true,//自动轮播 autoplay: { disableOnInteraction: false,//用户操作后不禁止自动轮播 delay: 4000, //4秒切换一次 }, centeredSlides: true,//活动块会居中,false为默认在左 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.banner-pagination',//分页器名称 clickable: true,//允许点击分页器操控轮播 } });
放一张 html代码搭配看的明白些
简单写了个说明，希望大家能看懂，不懂没关系，简单描述一下：
注意：1.swiper必须要有的，swiper-container，swiper-wrapper，swiper-slide。（这三个相当于声明吧，swiper-container用于包含整个swiper的所有东西，所以放在最外层，swiper-wrapper为轮播内容的父级容器，swiper-slide为轮播内容的声明，每个需要轮播的内容都要加上这个。这都是我个人理解的，说的可能不对）
2.如果需要分页器，必要要加上swiper-pagination，需要滚动条必须要swiper-scrollbar。分页器和滚动条的样式都可以自己设置，这个肯定都知道。
3.前后切换按钮，swiper-button-prev和swiper-button-next。
4.一个页面中引用多个Swiper可以给每个Swiper加上ID或Class区分，要保留默认的类名swiper-container。
5.最好是给swiper-wrapper设置一个宽度和高度，我遇到过好几次因为没有设置宽度和高度所以导致的swiper轮播内容出现偏移，不在屏幕可视范围内。
补充一下，分页器可以自定义，自定义分页器代码如下：
//彩票轮播 var lotterySwiper = new Swiper('.lottery-swiper', { direction: 'vertical', centeredSlides: true, autoplay: true, autoplay: { disableOnInteraction: false, delay: 4000, }, loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.lottery-pagination',//这个用的是分页器的别名 clickable: true, //这里是自定义分页器的代码 renderBullet: function (index, className) { return '<div data-v-62a6580a="" class="' + className + ' lotteryUl_dian"><i data-v-62a6580a=""></i></div>'; }, }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } });
注意，自定义分页器的方法中className必须要，我刚使用的时候，没有用className，自定义分页器就只是摆设，不能操作。
四：总结一下我所知道的实例化swiper时可以设置的几个参数，以及分别是做什么的
initialSlide：设定初始化时slide的索引。
direction：Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
speed：切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
grabcursor：设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
width：强制Swiper的宽度(px)，当你的Swiper在隐藏状态下初始化时用得上。这个参数会使自适应失效。可设置为undefined使这个参数无效。
heigt：强制Swiper的高度(px)，当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上。这个参数会使自适应失效。
roundLengths：如果设置为true，则将slide的宽和高取整(四舍五入)，以防止某些分辨率的屏幕上文字或边界(border)模糊。
autoHeight：自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
uniqueNavElements：默认为true时，仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了。
watchOverflow：当没有足够的slide切换时，例如只有1个slide，swiper会失效且隐藏导航等。默认不开启这个功能。loop模式无效，因为会复制slide。
init：当你创建一个Swiper实例时是否立即初始化。如果禁止了，可以稍后使用mySwiper.init()来初始化。
preloadImages：默认为true，Swiper会强制加载所有图片。
updateOnImagesReady：当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true。
centeredSlides：默认active slide居左，设置为true后居中。
slidesPerView：可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
slidesPerGroup：在carousel mode下定义slides的数量多少为一组
spaceBetween：在slide之间设置距离（单位px）。
slidesOffsetBefore：设定slide与左边框的预设偏移量（单位px）。
...
好吧，其实这些都是在swiper中文网复制的api文档中我觉得常用的，但是太多了，懒得复制了。
写的特别基础简单，因为我也只接触了皮毛，连事件都没用过，所以有说的不对的地方望指正。
