swiper内容滑动轮播插件，兼容移动端，附使用教程和参数说明

swiper移动端网页触摸内容滑动js插件，俗称轮播插件，它不仅轻量，功能还很强大！

主要文件：

    swiper.js和swiper.css

使用教程：

引入js和css文件

  <link rel="stylesheet" href="./swiper/swiper.min.css">
  <script src="./swiper/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 class="swiper-slide">Slide 4</div>
		<div class="swiper-slide">Slide 5</div>
	</div>
</div>

调用swiper

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

PS：一个页面有多个swiper的时候，请使用自定义类名初始化插件（分页、导航、滚动条等也使用自定义类名），这样不会相互影响。如：

<div class="swiper-container swiperDeom1">
	<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 class="swiper-slide">Slide 4</div>
		<div class="swiper-slide">Slide 5</div>
	</div>
</div>
<script>    
var swiper = new Swiper('.swiperDeom1');    
</script>

参数说明：

initialSlide：设定初始化时slide的索引。Swiper默认初始化时显示第一个slide，有时想初始化时直接显示其他slide，可以做此设置。

direction：Swiper的滑动方向，可设置为水平方向切换(horizontal)或垂直方向切换(vertical)。

speed：切换速度，即slider自动滑动开始到结束的时间（单位ms）。

grabCursor：设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。

parallax：设置为true开启Swiper的视差效果，内容在切换时更有层次感。

setWrapperSize：开启后会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。

width：强制Swiper的宽度(px)，当你的Swiper在隐藏状态下初始化时用得上

height：强制Swiper的高度(px)，当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上

roundLengths：设置为true，则将slide的宽和高取整(四舍五入)，以防止某些分辨率的屏幕上文字或边界(border)模糊。

autoHeight：自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。

uniqueNavElements：独立分页元素，当启用（默认）并且分页元素的传入值为字符串时，swiper会优先查找子元素匹配这些元素。可应用于分页器，按钮和滚动条（pagination, prev/next buttons and scrollbar elements）。当你的控制组件放在container外面的时候，需要用到。

nested：用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。请将子swiper的nested设置为true。

runCallbacksOnInit：如果你的初始化slide不是第一个或者设置了loop: true，那么初始化时会触发一次 [Transition/SlideChange] [Start/End] 回调函数。如果不想触发，可将此参数设置为false。

watchOverflow：当没有足够的slide切换时，例如只有1个slide，swiper会失效且隐藏导航等。默认不开启这个功能。loop模式无效，因为会复制slide。

init：当你创建一个Swiper实例时是否立即初始化。如果禁止了，可以稍后使用mySwiper.init()来初始化。

preloadImages：默认为true，Swiper会强制加载所有图片后才初始化。

updateOnImagesReady：当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true。

updateOnWindowResize：默认当窗口(window) 尺寸发生变化时，比如屏幕旋转，Swiper会更新和重新计算(update和breakpoints等)。禁止可设为false。

slidesPerView：设置slider容器能够同时显示的slides数量(carousel模式)。

slidesPerGroup：在carousel mode下定义slides的数量多少为一组。

spaceBetween：在slide之间设置距离（单位px）。

slidesPerColumn：设置多行布局里面每列的slide数量。

slidesPerColumnFill：多行布局中填充形式，column或row。

以上仅对一些常用的参数进行说明备注，详细API文档请查看官方说明文档https://www.swiper.com.cn/api/index.html

本文附件已精简整理，仅有swiper.min.js和swiper.min.css两个主要文件。