写个swiper小demo

swiper是开源、免费、强大的移动端触摸滑动事件。

AmberWu

2399人浏览 · 2017-06-01 20:15:41

AmberWu · 2017-06-01 20:15:41 发布

之前有用过swiper，也已经过去很久了，明天要把swiper写到页面里面了，今天先拿个demo练练手。

swiper是开源、免费、强大的移动端触摸滑动事件。
官网请戳请戳

html代码：

<!-- Swiper 需要轮播的内容 -->
  <div class="swiper-container swiper-container-horizontal">
    <div class="parallax-bg" style="background-image: url(&quot;img/Parallax.jpg&quot;); transform: translate3d(0%, 0px, 0px);" data-swiper-parallax="-23%"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-active" style="width: 1920px;">
        <div class="title" data-swiper-parallax="-100" style="transform: translate3d(0px, 0px, 0px);">Slide 1</div>
        <div class="subtitle" data-swiper-parallax="-200" style="transform: translate3d(0px, 0px, 0px);">Subtitle</div>
        <div class="text" data-swiper-parallax="-300" style="transform: translate3d(0px, 0px, 0px);">
          <p>我是第一张图片</p>
        </div>
      </div>
      <div class="swiper-slide swiper-slide-next" style="width: 1920px;">
        <div class="title" data-swiper-parallax="-100" style="transform: translate3d(100px, 0px, 0px);">Slide 2</div>
        <div class="subtitle" data-swiper-parallax="-200" style="transform: translate3d(200px, 0px, 0px);">Subtitle</div>
        <div class="text" data-swiper-parallax="-300" style="transform: translate3d(300px, 0px, 0px);">
          <p>我是第二张图片</p>
        </div>
      </div>
      <div class="swiper-slide" style="width: 1920px;">
        <div class="title" data-swiper-parallax="-100" style="transform: translate3d(100px, 0px, 0px);">Slide 3</div>
        <div class="subtitle" data-swiper-parallax="-200" style="transform: translate3d(200px, 0px, 0px);">Subtitle</div>
        <div class="text" data-swiper-parallax="-300" style="transform: translate3d(300px, 0px, 0px);">
          <p>我是第三张图片</p>
        </div>
      </div>
    </div>
    <!-- Add Pagination 分页-->
    <div class="swiper-pagination swiper-pagination-white swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
    <!-- Add Navigation -->
    <div class="swiper-button-prev swiper-button-white swiper-button-disabled"></div>
    <div class="swiper-button-next swiper-button-white"></div>
  </div>

js就很简单了，因为引入了插件，所以按照官网的api文档添加属性就可以了，下面举个例子：

  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination', // 如果需要分页器
    paginationClickable: true,
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    parallax: true,
    speed: 600, // 速度
    autoplay: 900, //可选选项，自动滑动
  });