Swiper 在网页开发中运用——简易教程

Swper 初级使用

1导入两个文件在head部分

 <script src="js/swiper/swiper.min.js"></script>
 <link rel="stylesheet" href="js/swiper/swiper.min.css">
 <style>
 // 此处定义一下 swiper外边框大小
     .swiper-container {
         width: 600px;
         height: 300px;
     }
 </style>

2.正文部分 在body当中定义

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/beautiful/1.png" alt=""></div>
        <div class="swiper-slide"><img src="img/beautiful/2.png" alt=""></div>
        <div class="swiper-slide"><img src="img/beautiful/3.png" alt=""></div>
        <div class="swiper-slide"><img src="img/beautiful/4.png" alt=""></div>
        <div class="swiper-slide"><img src="img/beautiful/5.png" alt=""></div>
        <div class="swiper-slide"><img src="img/beautiful/6.png" alt=""></div>
        <div class="swiper-slide"><img src="img/beautiful/7.png" alt=""></div>
        <div class="swiper-slide"><img src="img/beautiful/8.png" alt=""></div>
    </div>
  // panigation
    <div class="swiper-pagination"></div>
// progression
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

3.最后 定义 JS 让 swiper 动起来
··

<script>
    window. function(){
        var mySwiper = new Swiper ('.swiper-container', {
            effect:'coverflow',          //滑动效果
            //自动轮播
            autoplay: {
                delay: 1000,//时间 毫秒
                disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
            },
            touchAngle : 30,          //滑动的角度超过30度无效
            // 轮播图的方向，也可以是vertical方向
            direction:'horizontal',
            //环形切换关闭
            loop: true,
            // 切换的速度
            speed:800,             //滑动或者自动换页时的速度
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable:true,
                type:'bullets',
            },
            paginationClickable:true,
            // 这样，即使我们滑动之后， 定时器也不会被清除
            autoplayDisableOnInteraction : false,
            navigation:{
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            on: {  //滑动调用该方法
                slideChangeTransitionEnd: function(){
                    var slide = this.activeIndex;
                    //测试用
//                  alert("当前位置："+slide);//滑动结束时，告诉我现在是第几个slide（第几页）
                },
            },
        });
        mySwiper.pagination.bullets.css('background','white');
    }

</script>