建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS响应式轮播图插件 Flickity

来源:易助科技网浏览量:18收藏

简介


Flickity是一款用于创建响应式轮播图的JS插件,该插件不仅支持PC端还支持移动端触摸屏并有多种表现方式。flickity 是一个支持触摸,响应迅速的幻灯片轮播插件。支持环绕滑动、自由滑动、组滑动、自动播放、延迟加载、视差滑动、图片滑动。兼容IE10+, Android 4+, Safari for iOS 5+, Firefox 16+, Chrome 12+。


JS响应式轮播图插件 Flickity-示例图



使用


1.  引入文件


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


2.  HTML

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


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


3.  调用

1) 类似jQuery的方法 $('selector').flickity() ::



$('.main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true}
);


2) 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});


3) 在HTML中就可以调用Flickity,无需编写任何JavaScript:


<div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }'>


4) 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
    // 在滑动结束时,首先使用无限滚动
  }
);



相关链接


官网地址 :  https://flickity.metafizzy.co/

GitHub 地址 :  https://github.com/topics/flickity