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 在线演示及下载
相关推荐
仿苹果轮播图效果插件 插件应用
2017-6-30
JS时间处理插件MomentJS 插件应用
2017-12-18
支持移动触摸的jQuery图片Lightbox插件 插件应用
2017-5-20
移动端日期选择组件 插件应用
2017-6-23
jQuery返回顶部插件-toTop 插件应用
2017-12-25
简单的jQuery无缝向上滚动效果 插件应用
2017-12-12
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择? 插件应用
2018-10-6
Monent.js:强大的日期处理类库 插件应用
2018-11-2
省市区三级菜单联动插件 插件应用
2018-1-1
强大的jQuery图片查看器插件Viewer.js 插件应用
2017-5-20