码迷,mamicode.com
首页 > 其他好文 > 详细

swiper学习笔记一

时间:2017-12-06 17:48:36      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:button   space   dir   多个   间隔   play   ebe   nta   esper   

示例:
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper- silde">内容一</div>
    <div class="swiper- silde">内容二</div>
    <div class="swiper- silde">内容三</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>
一、Swiper初始化

var newSwiper=Swiper(‘swiper容器的css选择器‘,{个性化配置})
注:一个页面中引用多个Swiper,可以给每个容器加上ID或Class区分,要保留默认的类名swiper-container。

二、基本选项

1.initialSlide:初始化slide索引,默认为0
2.direction:slide滑动方向,默认水平;hroizontal(水平)和vertical(垂直)
3.speed:滑动速度,默认300
4.autoplay:自动切换时间间隔

三、Slides grid(网格分布)

1.slidesPerView:设置容器能够同时显示slide数量,默认1
2.slidesPerGroup:设置多少个slide为一组进行切换,默认1
3.spaceBetween:slide之间的间隔(px),默认0
4.slidesOffsetBefore:设置与左的偏移量(px),默认0
5.slidesOffetAfter:设置与右的偏移量(px),默认0

四、loop(环路)
1.loop模式true则开启,

swiper学习笔记一

标签:button   space   dir   多个   间隔   play   ebe   nta   esper   

原文地址:http://www.cnblogs.com/wangpengfei8313/p/7993399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!