swiper的基本使用

互联网 18-6-11

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>

这样就能生成一个默认的轮播图，可以用鼠标或者触摸屏来进行左右的滑动

添加分页与导航

    <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',         }     });

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

添加分页的方式和导航按钮非常类似 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>

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

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

循环与自动轮播：

   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的基本使用，更多相关内容请关注php中文网。