slick 旋转木马的配置

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们可以使用手势,鼠标拖放,或者 slick 上面的控制按钮去控制这个旋转木马,另外还有个小圆点也可以控制播放 .. 给 slick 方法添加一个对象参数 .. 在这个对象里可以去配置一下 slick 的一些功能 .. 先添加一个 dots 属性 .. 它的值设置成 true .. 保存 ..

在旋转木马的下面,现在会显示一些小圆点 .. 点击这些小圆点可以控制显示的项目 .. 现在每次只会显示一个项目,我们可以设置一下要显示的项目的数量 .. 这里再添加一个 slidesToShow 属性 .. 它的值就是要同时显示的项目数 .. 先设置成 2 .. 现在这里会显示两个项目 .. 每次滚动它的时候,会滚动一个项目 ..

这个滚动的项目的数量也可以去设置一下 .. 再加上一个 slidesToScroll 属性 .. 也把它的值设置成 2 .. 再试一下 .. 现在每次滚动的时候会滚动两个项目 ..

现在我想让旋转木马根据页面的宽度同时显示多个项目 .. 这里用一个 variableWidth .. 把它的值设置成 true .. 你会看到旋转木马会显示多个项目 ..

我们也可以把 slick 的 center mode ,中心模式打开 .. 添加一个 centerMode 属性 .. 它的值设置成 true ..

会用类似的方式展示旋转木马里的项目 .. 它会在旋转木马的中心位置显示一个关键的项目 ..

如果你不希望旋转木马可以无限的滚动 .. 我们可以把 infinite 这个属性的值设置成 false .. 这样没有要显示的项目的时候,我们就不能继续去滚动它了 .. 需要向相反的方向往回去滚动 ..

slick 旋转木马的配置《 前端库 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点