swiper4的用法 admin 2023-08-30 14:15:02 篇首语:本文由小编为大家整理,主要介绍了swiper4的用法相关的知识,希望对你有一定的参考价值。 1.swiper:html结构 slider1 slider2 slider3 2.样式 .swiper-container margin:0 auto; width:100px; height:200px; overflow: hidden; border:1px solid red; .swiper-wrapper,.swiper-slide width:100px; height:200px; 3.水平轮播var mySwiper = new Swiper(".swiper-container", autoplay: true,//可选选项,自动滑动 loop:true ) 4.垂直轮播 var mySwiper = new Swiper(".swiper-container", autoplay: true,//可选选项,自动滑动 direction : "vertical",//控制滚动的方向,水平或垂直 loop:true ) 5.轮播可视区域展示多个slide项 var mySwiper = new Swiper(".swiper-container", autoplay: true,//可选选项,自动滑动 direction : "vertical", loop:true, slidesPerView : 3,//设置slider容器能够同时显示的slides数量(carousel模式) ) 6.左右切换,获取activeIndex的值var mySwiper = new Swiper(".swiper-container", on: //slideChangeTransitionStart开始切换时告诉我现在是第几个slide slideChangeTransitionEnd: function() alert(this.activeIndex);//切换结束时,告诉我现在是第几个slide , ,) 7.分页1/3展示效果var mySwiper = new Swiper(".swiper-container", pagination: el: ".swiper-pagination", type:"fraction", //type: "bullets",圆点默认 //type: "fraction",分页 //type : "progressbar",进度条 //type : "custom",自定义 ,) 8.延迟加载图片 9.滚动条 10.缩略图 11.锚导航以上是关于swiper4的用法的主要内容,如果未能解决你的问题,请参考以下文章 vue单文件组件(SFC)规范 mysql数据库最大连接数可以设置为多少 您可能还会对下面的文章感兴趣: 相关文章 浏览器打不开网址提示“ERR_CONNECTION_TIMED_OUT”错误代码的解决方法 如何安装ocx控件 VMware的虚拟机为啥ip地址老是自动变化 vbyone和EDP区别 linux/debian到底怎么重启和关机 苹果平板键盘被弄到上方去了,如何调回正常? 机器学习常用距离度量 如何查看kindle型号