swiper的根本运用

发布时间：09/01 来源：未知浏览：关键词：

swiper是啥？

swiper是一款轻量级的轮播图插件，不仅支撑pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播结果。

根本用途

swiper使用需要两个文件，一个是swiper.css，里面规定了一些在这个滑动轮播插件中常用的样式，当然假如你情愿的话可以本人定义样式
别的一个是swiper.js这个是插件的主体部分。
在页面中引入这两个文件之后第一要写根本的html构造
下面所有的使用方式基于swiper 4.x

  <p class="swiper-container">
    <p class="swiper-wrapper">
      <p class="swiper-slide">Slide 1</p>
      <p class="swiper-slide">Slide 2</p>
      <p class="swiper-slide">Slide 3</p>
      <p class="swiper-slide">Slide 4</p>
      <p class="swiper-slide">Slide 5</p>
      <p class="swiper-slide">Slide 6</p>
      <p class="swiper-slide">Slide 7</p>
      <p class="swiper-slide">Slide 8</p>
      <p class="swiper-slide">Slide 9</p>
      <p class="swiper-slide">Slide 10</p>
    </p>
  </p>

类名为swiper-container 是滑动轮播插件的包裹器，相似于一个mask，一个窗口，swiper-wrapper是一个依照必然次序摆列的所有轮播图的汇合，在默许状况下是摆布摆列，当鼠标或者触屏停止操纵的时候，改动的是这个元素的位置，而到达轮播的结果。swiper-slide则是每个轮播图元素，在写好根本html构造之后，需要对这个轮播图停止初始化

<script>
    var swiper = new Swiper('.swiper-container');</script>

这样就能生成一个默许的轮播图，可以用鼠标或者触摸屏来停止摆布的滑动

增加分页与导航

大部分的轮播图都有分页，导航，可以让会员看到当前是在什么位置，并且让会员知道这是一个可以交互的部分，增加分页的方式也很简便，只需要在初始化的时候增加选项指定一下分页的元素就行
html部分,在swiper-container下面增加下一个与上一个按钮

    <p class="swiper-container">
        <p class="swiper-wrapper">...</p>
          <p class="swiper-button-next"></p>
          <p class="swiper-button-prev"></p>
    </p>

在这里swiper-button-next和swiper-button-prev都是指定好的按钮，下一个按钮会垂直居中并且靠右侧，上一个按钮会垂直居中靠右侧，当然也能本人指定按钮。

    var swiper = new Swiper('.swiper-container',{
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });

在初始化函数中增加按钮元素。
这样就能生成一个有导航按钮的轮播图了

siwper导航

增加分页的方式和导航按钮非常相似
html:

  <p class="swiper-container">
    <p class="swiper-wrapper">
        ...    </p>
    <!-- 分页 -->
    <p class="swiper-pagination"></p>
    <!--导航按钮-->
    <p class="swiper-button-next"></p>
    <p class="swiper-button-prev"></p>
  </p>

在初始化的时候参加分页元素
js:

    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
      navigation:{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });

这样就能生成有分页又有导航的轮播图了
有导航按钮和分页的轮播图

轮回与主动轮播：

js：
在初始化的时候参加

   var swiper = new Swiper('.swiper-container', {       //分页
       pagination: {
           el: '.swiper-pagination',
       },       //导航按钮
       navigation:{
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev',
       },       //主动轮播
       autoplay: {
           delay: 2500,//时间 毫秒
           disableOnInteraction: false,//会员操纵之后可否休止主动轮播默许true 
       },
   });

其他常用属性

分页用进度条代替

   var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',            type: 'progressbar',//将分页的类型改为进度条就行
        },
        navigation:{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    });

本文讲解了swiper的根本使用，更多相关内容请关注百分百源码网。