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

1. 基本结构:
swiper
代码
swiper:整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡);
河南网站建设公司价格,品牌型网站建设价格,商城网站建设价格,响应式网站建设价格,河南网站设计制作
container:swiper的容器,里面包括滑动块(slides)的封套(wrapper)、分页器(pagination)、前进按钮等;
wrapper:触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移;
slider:切换的滑块,可以包含文字、图片、html元素或另外一个swiper;
pagination:分页器,指示slide的数量和当前活动的slide;
河南网站建设公司价格,品牌型网站建设价格,商城网站建设价格,响应式网站建设价格,河南网站设计制作
active slide:活动滑块,即当前看到的(visible)slide,当可视slide不止一个时,默认最左边那个是活动滑块;
callback:回调函数,在某些情况下触发。
2. api:
1.new swiper(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。
上一个:企业外贸建站类型分类
下一个:暂无
桦川网站建设,桦川做网站,桦川网站设计