服务热线 400-660-8066

珠海网站建设
首页 站内资讯

珠海网站建设

站内资讯
珠海网站建设 / 站内资讯 / 行业资讯 / 正文

网站前端开发之Swiper3轮播的使用

来源: All文章
发布时间:2023-04-13 17:00:31

  1.基本结构:

  Swiper:整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡);

  Container:Swiper的容器,里面包括滑动块(slides)的封套(wrapper)、分页器(pagination)、前进按钮等;

  Wrapper:触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移;

  Slider:切换的滑块,可以包含文字、图片、html元素或另外一个Swiper;

  Pagination:分页器,指示slide的数量和当前活动的slide;

  activeslide:活动滑块,即当前看到的(visible)slide,当可视slide不止一个时,默认最左边那个是活动滑块;

  Callback:回调函数,在某些情况下触发。

  2.API:

  1.newSwiper(swiperContainer,parameters):用于初始化一个Swiper,返回初始化后的Swiper实例。swiperContainer:必选,HTML元素或者string类型,Swiper容器的css选择器,例如.swiper-container。parameters:可选,参见配置选项。

  2.Autoplay:自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。用户操作后autoplay停止,参考基本选项autoplayDisableOnInteraction。你还可以在某个slide上设置单独的停留时间,例

  。

  3.autoplayDisableOnInteraction:用户操作swiper之后,是否禁止autoplay。默认为true:停止。如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。

  操作包括触碰,拖动,点击pagination等。

  4.fade:fade效果参数。可选参数:crossFade(

  3.03启用)。默认:false。关闭淡出。过渡时,原slide透明度为1(不淡出),过渡中的slide透明度从0-1(淡入),其他slide透明度0。可选值:true。开启淡出。过渡时,原slide透明度从1-0(淡出),过渡中的slide透明度从0-1(淡入),其他slide透明度0。

* 文章来源于网络,如有侵权,请联系客服删除处理。
在线 咨询

添加动力小姐姐微信

微信 咨询

电话咨询

400-660-8066

我们联系您

电话 咨询
微信扫码关注动力小姐姐 X
qr