滑动之swiper调用

desc

主要用于幻灯片切换与类似fullpage.js效果一样的全屏滚动

method

• 指令调用

  已经封装了swiperContainer与swiperSlide指令，只需要在页面直接写即可：

<div swiper-container
       show-nav-buttons="false"
       direction = 'vertical'
     lock='bannerTopList.length <= 1' class="swiper-slide wd-100 flex flex-between bg-white relative">
     <div swiper-slide
       class="wd-100 swiper-slide text-center pv-px-10 bdb-primary-2 primary" ng-repeat="banner in [5]">
        <div class="wd-100 block text-center">
          12121212555555555555
        </div>
      </div>

  </div>

<style>
      .scroll{
          height: 100%;
          width: 100%;
      }
      .swiper-container{
          width: 100%;
      }
  </style>

指令只能在有ng-repeat的地方使用，否则无法计算slide的个数。

• 原生使用

在一些业务场景中，没有办法使用swiper预封装的指令，就必须使用原生方法进行调用。

  <div class="swiper-container swiper-container-vertical" id="swiper-container2 wd-100" style='height: 100%'>
      <div class="swiper-wrapper"  style='height: 100%'>
        <div class="swiper-slide blue-slide swiper-slide-prev" style='background: #ccc'>
          slider1</div>
        <div class="swiper-slide red-slide swiper-slide-active" style='background: orange'>
          slider2</div>
        <div class="swiper-slide orange-slide swiper-slide-next" style='background: yellow'>
          slider3</div>
      </div>
    </div>

controller('demoTest',[
    '$scope',
    '$loader',
    function($scope, $loader){

      $loader.get('swiper').then(function(data){
        var mySwiper = new Swiper('.swiper-container',{
          direction : 'vertical',
          })
      })

    }])

此处是使用$loader懒加载swiper，然后使用.

关于swiper的配置可以参考swiper中文网