swiper学习笔记一

示例：
<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则开启，

转载于:https://www.cnblogs.com/wangpengfei8313/p/7993399.html