兼容移动端的多功能轮播插件flickity.js

兼容移动端的多功能轮播插件flickity.js
flickity 是一个支持触摸,响应迅速的幻灯片轮播插件。支持环绕滑动、自由滑动、组滑动、自动播放、延迟加载、视差滑动、图片滑动。兼容IE10+, Android 4+, Safari for iOS 5+, Firefox 16+, Chrome 12+

入门指南

动画演示

flickity轮播插件使用方法

引入依赖

<link rel="stylesheet" href="path/to/flickity.min.css">
<script src="path/to/flickity.pkgd.min.js"></script>

HTML代码,

flickity使用容器元素和一组子元素进行包装

<div class="main-carousel">
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
    ...//省略代码
</div>

Javascript脚本初始化

flickity初始化可以有多种方式
1.在jQuery插件中初始化:$("selector").flickity(),如:

$('.main-carousel').flickity({
  cellAlign: 'left',
  contain: true,
  //更多配置项
});

2.原生JS方式初始化,new Flickity(element)方式,Flickity对象初始化时接受2个参数,一个选择器,一个配置项,如:

var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
  cellAlign: 'left',
  contain: true,
  //更多配置项
});

3.也可直接在HTML标签中初始化,不实用任何脚本,只需要添加data-flickity属性到轮播容器元素上即可,如本示例的:data-flickity='{ "cellAlign": "left", "contain": true }'

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
    <div class="carousel-cell">...</div>
    ...//省略代码
</div>

Flickity的更多选项示例:

var myFickity = new Flickity( ‘.gallery’, {
// 选项,默认值列表

accessibility: true,
// 启用键盘导航,按左右键

adaptiveHeight: false,
// 将幻灯片/轮播高度设置为所选的幻灯片

autoPlay: false,
// 跳转到下一个单元格
// 如果为 true, 默认间隔3秒
// 或以毫秒为单位设置间隔时间
// 例如 autoPlay: 1000 间隔为1秒

cellAlign: ‘center’,
// 对齐,“中心”,“左”或“右”
// 或小数点0-1,0是容器的开始(左),1是结束(右)

cellSelector: undefined,
// 指定单元格元素的选择器

contain: false,
// 将包含单元格到容器
// 所以在开始或结束时没有多余的滚动
// 如果启用了 wrapAround ,则不起作用

draggable: true,
// 启用拖动和触摸

dragThreshold: 3,
// 用户必须水平滚动才能开始拖动的像素数
// 增加触摸设备的垂直滚动空间

freeScroll: false,
// 使内容可以自由滚动和弹出
// 不调整单元格

friction: 0.2,
// 较小的数字=更容易滑动

groupCells: false,
// 将组包含在幻灯片中

initialIndex: 0,
// 初始选定单元的基于0的索引

lazyLoad: true,
// 启用延迟加载图像
// 设置图像 data-flickity-lazyload=”src.jpg”
// 设置为加载相邻单元格的图像

percentPosition: true,
// 以百分比值而不是像素设置定位
// 如果项目具有百分比宽度,则启用
// 如果项目具有像素宽度(如图像)则禁用

prevNextButtons: true,
// 创建并启用按钮以点击上一个和下一个单元格

pageDots: true,
// 创建并启用页面点

resize: true,
// 监听窗口调整大小事件,以调整大小和位置

rightToLeft: false,
// 实现从右到左的布局

setGallerySize: true,
// 设置画廊的高度
// 如果图库已经使用CSS设置了高度,则禁用它

watchCSS: false,
// 观看内容:之后的元素
// 如果激活 #element:after { content: ‘flickity’ }

wrapAround: false
// 在滑动结束时,首先使用无限滚动

});

the end