Swiper

Swiper是一个功能插件，移动端、PC端均可使用。

有JS版本的，也有基于JQ版本的

meta标签 移动端 自适应

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

最简单的版本，没有按钮，和左右按钮的轮播图：

 <link rel="stylesheet" href="../dist/css/swiper.min.css">

修改左右按钮 ：

.swiper-button-next，.swiper-button-prev{    background: none;}

布局：

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
        </div>
 </div>

　引入以及JS初始化：

    <script src="../dist/js/swiper.min.js"></script>
    <script>
         var swiper = new Swiper('.swiper-container');
    </script>

 JQ的swiper

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../images/1.jpg" alt=""/></div>
        <div class="swiper-slide"><img src="../images/2.jpg" alt=""/></div>
        <div class="swiper-slide"><img src="../images/3.jpg" alt=""/></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条
    <div class="swiper-scrollbar"></div>-->
</div>
<!--导航等组件可以放在container之外-->
</body>
<script src="http://static.yuntongauto.com/js/jquery-1.9.1.min.js"></script>
<script src="js/swiper-3.4.2.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
//        direction: 'vertical',  垂直
//        direction: 'horizonta', 水平  默认 
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        paginationClickable: true，/*此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。*

　　　　// 如果需要前进后退按钮 
　　　　nextButton: '.swiper-button-next',
 　　　 prevButton: '.swiper-button-prev' 
　　　　/* // 如果需要滚动条 
　　　　scrollbar: '.swiper-scrollbar',

　　　　scrollbarHide: false  滚动条隐藏：true 隐藏 false 显示

*/ 
}) 
</script>

各种属性对应的类型

/*两个swiper-slide之间的空白*/
        spaceBetween: 30

　　

/*显示的模块数量 为2 auto 是按大小自动显示*/
slidesPerView : 2,//'auto

 

/*滑动时 使得中间模块在中间*/
        centeredSlides: true,

　　

/*默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，
  设置为true则变为free模式，slide会根据惯性滑动且不会贴合*/
freeMode: true

　　

/*设置为true时，鼠标覆盖Swiper时指针会变成手掌形状*/
       grabCursor: true  

　　

 /*多行布局里面每列的slide数量。*/
        slidesPerColumn: 2,

　　

<div class="swiper-container" dir="rtl"> 从右边向左边展示

　　

/*循环轮播图*/
        loop: true

　　

/*是否键盘切换。设置为true时，能使用键盘方向键控制slide滑动。*/
        keyboardControl: true

        mousewheelControl: true  鼠标滚轮控制

 /*自动切换的时间间隔（单位ms）*/
        autoplay: 2500,
 /*如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay*/
        autoplayDisableOnInteraction: false
 /*反方向操作
        setInterval("mySwiper.slidePrev()", 2000);*/

 

/*切换效果，默认为"slide"（位移切换），值："fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）*/
        effect: 'fade'

3d:overflow

 

 cube:

 

嵌套轮播图：

html:

<div class="swiper-container swiper-container-h">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Horizontal Slide 1</div>
            <div class="swiper-slide">
横向轮播里嵌套的纵向轮播图
                <div class="swiper-container swiper-container-v">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">Vertical Slide 1</div>
                        <div class="swiper-slide">Vertical Slide 2</div>
                        <div class="swiper-slide">Vertical Slide 3</div
                    </div>
                    <div class="swiper-pagination swiper-pagination-v"></div>
                </div>
            </div>
            <div class="swiper-slide">Horizontal Slide 3</div>
            <div class="swiper-slide">Horizontal Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-h"></div>
    </div>

　　script:

 <script>
//横向
    var swiperH = new Swiper('.swiper-container-h', {
        pagination: '.swiper-pagination-h',
        paginationClickable: true,
        spaceBetween: 50
    });
//纵向
    var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        direction: 'vertical',
        spaceBetween: 50
    });
</script>

　

var classA = new Swiper('.classA', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,

　　　　　loop:true,
　　　　　loopedSlides: 9 注意 循环轮播图 上下对应

    });
    var classB = new Swiper('.classB', {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2, 触摸距离与slide滑动距离的比率
        slideToClickedSlide: true

　　　　　loop:true,
　　　　　loopedSlides: 9 注意 循环轮播图 上下对应 相同

    });
    /*两个Swiper相互控制 就可以实现缩略图的轮播图*/
    classA.params.control = classB;
    classB.params.control = classA;

　一些不常用的：

/*默认为true，Swiper会强制加载所有图片*/
preloadImages: false,
// Enable lazy loading
/*设为true开启图片延迟加载，使preloadImages无效。
 需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
 背景图的延迟加载则增加属性data-background（3.0.7开始启用）。
 还可以为slide加一个预加载，<div class="swiper-lazy-preloader"></div>
 或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。*/
/*启用延迟加载*/
lazyLoading: true，

breakpoints: {
    1024: {
        slidesPerView: 4,
        spaceBetween: 40
    },
    768: {
        slidesPerView: 3,
        spaceBetween: 30
    },
    640: {
        slidesPerView: 2,
        spaceBetween: 20
    },
    320: {
        slidesPerView: 1,
        spaceBetween: 10
    }
}

断点设定：根据屏幕宽度设置某参数为不同的值，类似于响应式布局的media screen。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween，而像slidesPerColumn、loop、direction、effect等则无效。

/*自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化*/
autoHeight: true,

/*分页器 ‘bullets’  圆点（默认），‘fraction’ 分式 ，‘progress’  进度条 ，‘custom’ 自定义*/
paginationType: 'fraction'　

版本之间也有一些差异：

	swiper3.x	swiper2.x
引入文件	swiper.min.js swiper.min.css	idangerous.swiper.min.js idangerous.swiper.css
移动机制	transform	transform或left/top
布局方式	flex或一般布局，wrapper宽度为第一个slide	一般布局，wrapper宽度为slide总和
更新	正在更新	停止更新 最新版本2.7.6
兼容性	部分PC端浏览器，主流移动端浏览器	PC端浏览器，IE7+，部分移动端浏览器