JavaScript响应式轮播图插件–Flickity
简介
flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式、循环滚动、自动播放、是否支持拖动、是否开启分页、是否自适应窗口等。
使用方法
引入文件
html
增加js-flickity class到对象.
...
调用JS
第一种方法
$('.main-gallery').flickity({ // options cellAlign: 'left', contain: true });
第二种方法
Vanilla JavaScript的方法:
var elem = document.querySelector('.main-gallery'); var flkty = new Flickity( elem, { // options cellAlign: 'left', contain: true }); // element argument can be a selector string // for an individual element var flkty = new Flickity( '.main-gallery', { // options });
第三种方法
你同样可以在HTML中就可以调用Flickity,无需编写任何JavaScript。
参数
参数 描述 默认值 cellAlign 对齐方式 可选参数: ‘center’, ‘left’, ‘right’ center wrapAround 循环滚动 可选参数: true, false false contain 控制按钮 自定义控制按钮从开始或结束滚动,若在 wrapAround: true无效. false autoPlay 自动播放 false draggable 是否支持拖动 true cellSelector 目标容器 undefined pageDots 是否开启分页 true prevNextButtons 是否显示上下页按钮 true resizeBound 是否自适应窗口 true 在线演示及下载
相关推荐
动画库animate.css的用法 插件应用
2017-4-16
BetterScroll:可能是目前最好用的移动端滚动插件 插件应用
2017-12-10
仿苹果轮播图效果插件 插件应用
2017-6-30
前端开发者常用的 9 个 JavaScript 图表库 插件应用
2017-12-25
FullPage.js全屏插件文档及使用方法 插件应用
2017-6-27
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择? 插件应用
2018-10-6
skippr – 更轻更快的jQuery幻灯片插件 插件应用
2017-12-12
jQuery幻灯片插件-Smoothslides 插件应用
2017-6-26
Slick.js幻灯片使用方法 插件应用
2017-6-3
滚动页面产生动画WOW.js的用法 插件应用
2017-5-4