H5 Swiper使用须知

作者: 风之化身呀 | 来源:发表于2017-07-30 21:11 被阅读2427次

1、基本结构

<div class="swiper-container">
        <div class="swiper-wrapper"> //slider元素必须由该元素包裹，类名不能改
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
        </div>
</div>
//js初始化
var swiper = new Swiper('.swiper-container');

2、常用功能

2.1 开启分页

<div class="swiper-container">
        <div class="swiper-wrapper"> //slider元素必须由该元素包裹，类名不能改
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
        </div>
        <div class="swiper-pagination"></div>   //类名与下面初始化js一致
</div>
//js初始化
var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true         //分页按钮可点击来切换
 });

2.2 开启垂直方向slider

默认水平方向。

 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical'       //添加direction参数即可
});

2.3 开启slider之间留空隙

默认没有空隙。

 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
       spaceBetween: 30       //添加spaceBetween参数即可,单位为像素，注意并不影响slider宽度，本质是在slider之间加margin
});

2.4 开启首页显示多个slider（第一个slider不居中）

默认首页只显示一个slider

 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        slidesPerView:3,    //添加slidesPerView参数即可,可为小数，如2.5
       spaceBetween: 30       
});

2.5 开启首页显示多个slider（第一个slider居中）

默认首页只显示一个slider

 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        slidesPerView:3,    
       spaceBetween: 30，
       centeredSlides: true,       //添加centeredSlides参数即可
});

2.6 开启随意滑动

默认最快一次只能划1-3个slider，开启后可以滑动到任意一个。

     var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true  //添加freeMode参数即可
    });

默认不显示滚动条

<div class="swiper-container">
        <div class="swiper-wrapper"> //slider元素必须由该元素包裹，类名不能改
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
        </div>
        <div class="swiper-scrollbar"></div>   //类名与下面初始化js一致
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
</div>
//js初始化
var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',  //替换分页的一种形式
        scrollbarHide: true,          //不活动时自动隐藏scrollbar
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true
    });

2.8 开启无限滚动和键盘(鼠标滑轮)控制滚动

默认到最后一个slider时不能继续往同一个方向滚动。

     var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true，  //添加loop参数即可，可同方向从最后一个滑向第一个
        keyboardControl: true   //添加keyboardControl参数即可用键盘控制
        mousewheelControl: true  //添加mousewheelControl参数即可用滑轮控制
    });

2.9 开启图片淡入淡出功能

默认无淡入淡出。slider内容最好是图片，不要是文字，会被覆盖

     var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        effect: 'fade'   // 添加effect参数即可,其他效果见官网
    });

2.10 开启自动切换

默认不自动切换。

     var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        autoplay: 2500,  //切换间隔，毫秒为单位
        autoplayDisableOnInteraction: false  //打断自动切换后是否停止自动切换
    });

2.11 开启用hash值切换slider

默认不能用hash切换。

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        hashnav: true,                   //添加hashnav和hashnavWatchState参数即可
        hashnavWatchState: true
    });

2.12 自定制分页按钮

默认是点点。

//第一步，写定制的样式
.swiper-pagination-bullet {   //未激活样式
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color:#000;
      opacity: 1;
      background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {   //激活样式
      color:#fff;
      background: #007aff;
}
// 第二步，调用如下函数paginationBulletRender：
var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        paginationBulletRender: function (swiper, index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        }
});

2.13 根据屏幕宽度设置每屏显示几个slider

默认显示一个。

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        slidesPerView: 5,
        spaceBetween: 50,
        breakpoints: {           //设置breakpoints参数，很强大
            1024: {
                slidesPerView: 4,
                spaceBetween: 40
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                spaceBetween: 20
            },
            320: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        }
    });

2.14 图片懒加载

默认一次加载所有图片。

     <div class="swiper-wrapper">
            <div class="swiper-slide">
                <!-- 真正图片url放在data-src属性 -->
                ![](http://lorempixel.com/1600/1200/nature/1)
                <!-- 图片未加载完成时加载的图片或加载进度提示，如是图片通常较小 -->
                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            </div>
            <div class="swiper-slide">
                ![](http://lorempixel.com/1600/1200/nature/2)
                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Navigation -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>

//js
var swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
        paginationClickable: true,
        preloadImages: false,         //是否预加载所有图片
        lazyLoading: true               //开启懒加载
    });

2.15 其他

还有如：开启分数形式分页按钮；滚动条式分页按钮；effect的多种取值；每个slider高度不一致；图片懒加载；history形式切换slider等效果，以上列举了常用的功能。
更多功能，请看官网

3 常用的API

onSlideChangeStart(swiper)
swiper从当前slide开始过渡到另一个slide时执行。可接受swiper实例作为参数，输出的activeIndex是过渡后的slide索引。

var mySwiper = new Swiper('.swiper-container',{
    onSlideChangeStart: function(swiper){
      alert(swiper.activeIndex);
    }
})

slideTo(index)
切换到指定index的slide

var mySwiper = new Swiper('.swiper-container',{
})
mySwiper.slideTo(index)

几个类名不可变：swiper-slide swiper-wrapper，其它类名修改了在实例化时要对应，最好不要改

网友评论

前端知识点

本文标题：H5 Swiper使用须知

本文链接：https://www.haomeiwen.com/subject/yseklxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！