swiper4基础

这段时间在公司实习做前端，感觉前端没学习到很多前端框架，接口那些都是写好的，只需要调用就好，感觉没什么好记的，唯一觉得有必要记的就是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: , //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: ,
        },
        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文档中我觉得常用的，但是太多了，懒得复制了。

写的特别基础简单，因为我也只接触了皮毛，连事件都没用过，所以有说的不对的地方望指正。