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

swiper5.png

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两个主要文件。

0 位网友评论:

欢迎来评论

请填写验证码

为您推荐