Swiper.js全屏上下切换

Swiper.js 全屏切换 Swiper切换 Swiper

1.先去官网(https://www.swiper.com.cn)下载最新版到自己到项目里

2.在页面引入js和css,因为我到项目里用到里animate.css所以一起引入了。

<script src="js/swiper.js" type="text/javascript"></script>

<link href="css/swiper.css" rel="stylesheet" type="text/css" />

<link href="css/animate.min.css" rel="stylesheet" type="text/css" />

3.html结构

<div class="swiper-container">

    <div class="swiper-wrapper">

        <div class="swiper-slide swiper-1">

        </div>  

        <div class="swiper-slide swiper-2">

        </div>  

    </div>

</div>

注意这个结构是不能瞎写的,想写任何东西请在swiper-slide里面写。

4.js调用

       var swiperV = new Swiper('.swiper-container', {

          direction: 'vertical',//竖着切换

          mousewheel: true,//鼠标控制

          //设置宽度为全屏  

          width: window.innerWidth,

          height : window.innerHeight,

          spaceBetween: 50,//页面间隙

          pagination: {

              el: '.swiper-pagination',

              clickable: true,

          },

          navigation: {

              nextEl: '.swiper-button-next',

          },          

          on: {

              init:function(){

                  //初始化

              },

              slideChangeTransitionEnd: function(){//切换完执行的方法

                  var num = this.activeIndex;//当前是第几个页面

                  ......    //这里是自己逻辑的代码

              },

          },

      });

其他的看文档即可。