JavaScript响应式轮播图插件–Flickity

JavaScript响应式轮播图插件–Flickity 转载

mob604756e80bb7 2018-11-17 13:08:00

文章标签 自适应 html javascript 可选参数 分页 文章分类 Java 编程语言

简介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 elementvar flkty = new Flickity( ‘.main-gallery’, { // options});

第三种方法你同样可以在HTML中就可以调用Flickity，无需编写任何JavaScript。

参数参数描述默认值cellAlign对齐方式 可选参数: ‘center’, ‘left’, ‘right’centerwrapAround循环滚动 可选参数: true, falsefalsecontain控制按钮 自定义控制按钮从开始或结束滚动，若在 wrapAround: true无效.falseautoPlay自动播放falsedraggable是否支持拖动truecellSelector目标容器undefinedpageDots是否开启分页trueprevNextButtons是否显示上下页按钮trueresizeBound是否自适应窗口true 赞 收藏 评论 分享 举报

上一篇：Java性能调优概述

下一篇：用 JavaScript 实现简单拼图游戏