博客> swiper的基础教程(十二)
swiper的基础教程(十二)
2019-12-09 12:13 评论:0 阅读:715 zhanying
html5 swiper

本文为H5EDU机构官方的HTML5培训教程 swiper教程。

本节内容介绍swiper当中如何将导航变为滚动条样式。

首先我们搭建一个swiper页面的基本布局。

H5EDU 1
H5EDU 2
H5EDU 3
H5EDU 4
H5EDU 5
H5EDU 6
H5EDU 7
H5EDU 8
H5EDU 9

然后到JS部分添加初始化代码。 var swiper = new Swiper('.swiper-container',{ spaceBetween:30, grabCursor:true, slidesPerView:3, centeredSlides:true, scrollbar:'.swiper-scrollbar', //绑定分页导航 scrollbarHide:true //开启导航在不活动时的隐藏 }); 可以注意到在本篇当中将分页导航的swiper-container改变为swiper-scrollbar,然后在初始化当中绑定导航。就可以实现了。当然,可以关闭导航条的隐藏效果

点击进入swiper强化教程: Enter your link description here:

收藏
0
sina weixin mail 回到顶部