swiper

作者: Smile_smile_ | 来源:发表于2019-04-12 10:02 被阅读0次

swiper 官网

1 使用方法

引入js(可与jQuery.js同时使用)与css文件

<link rel="stylesheet" href="dist/css/swiper.min.css">

<script src="dist/js/swiper.min.js"></script>

html写法:

<div class="swiper-container">

    <div class="swiper-wrapper">

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

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

        <div class="swiper-slide">Slide 3</div>

    </div>

    <!-- 如果需要分页器 -->

    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->

    <div class="swiper-button-prev"></div>

    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->

    <div class="swiper-scrollbar"></div>

</div>

js控制属性(初始化)

在页面加载完成后使用

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

    direction: 'vertical', // 垂直切换选项

    loop: true, // 循环模式选项

    // 如果需要分页器

    pagination: {

      el: '.swiper-pagination',

    },

    navigation: {

      nextEl: '.swiper-button-next',

      prevEl: '.swiper-button-prev',

    },

      scrollbar: {

      el: '.swiper-scrollbar',

    },

  });

2 基本常用属性

slidesPerView:每次显示n个slide

slidesPerGroup:每次切换n个slide

spaceBetween:slide之间的间距

width:宽度,height:高度

autoHeight:高度是否跟随外部container及wrapper变化,默认为false

speed:切换速度

autoPlay:是否自动切换,默认为false

delay:延迟时间(延迟(等待)n s后切换到下一个slide)

loop:是否循环,默认为false

direction:方向,默认为horizontal(横向),可选"vertical"竖向

3 常用功能及组件

  pagination:分页器

     种类:bullets(圆点,默认)fraction (分式 <eg:3/10>)、progressbar (进度条,默认在顶部)、custom (自定义);

  scrollbar:滚动条

   <div class="swiper-scrollbar"></div> 

      scrollbar: {   el: '.swiper-scrollbar',   },

  lazyLoading:图片懒加载 ,

    图片增加class = "swiper-lazy",src改为data-src

     lazy: {

      loadPrevNext: true,

   },

 navigation:前进与后退按钮

   <div class="swiper-button-prev"></div>  <div class="swiper-button-next"></div>

    navigation: {

       nextEl: '.swiper-button-next',

       prevEl: '.swiper-button-prev',

    },

noSwiping:禁止滑动

   <div class="swiper-slide swiper-no-swiping">slider2</div>

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

     noSwiping : true,

  });

touchStartPreventDefault:阻止touchStart('mousedown')默认事件

touchMoveStopPropagation:阻止touchmove冒泡事件


2019.04.23更新

偶尔会遇到这样的问题,各swiper-slide边上会有一点缝隙,原因是swiper-container及swiper-wrapper的宽度略大于swiper-slide,这是由于swiper-slide的宽度一般会取整,而上面二者不会;
若是设定了slidesPerView值大于1 ,可添加属性roundLengths : false,这样宽度便不会取整;
有时候并未设置slidesPerView,还是会这样,此时需将swiper-container宽度略增加或减少一点即可(设置padding-right值,因为swiper-slide默认贴合swiper-wrapper左侧或直接设置宽度)

相关文章

网友评论

      本文标题:swiper

      本文链接:https://www.haomeiwen.com/subject/vofwbqtx.html