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

下载https://github.com/metafizzy/flickity/archive/master.zip

演示https://flickity.metafizzy.co/

调用

1.引入文件

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

2.编写html

<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>

3.js配置

var flky = 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: ,
// 用户必须水平滚动才能开始拖动的像素数
// 增加触摸设备的垂直滚动空间 freeScroll: false,
// 使内容可以自由滚动和弹出
// 不调整单元格 friction: 0.2,
// 较小的数字=更容易滑动 groupCells: false,
// 将组包含在幻灯片中 initialIndex: ,
// 初始选定单元的基于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
// 在滑动结束时,首先使用无限滚动 });

4.样式

.carousel-cell {
width: %; /* full width */
height: 160px; /* height of carousel */
margin-right: 10px;
}

更多样式见:https://flickity.metafizzy.co/style.html

flickity:支持触摸滑动,响应迅速的幻灯片轮播插件的更多相关文章

  1. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  2. cssSlidy.js 响应式手机图片轮播

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...

  3. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  4. 面板支持单个,多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  5. 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  6. 第八章 让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

    因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果.然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有支 ...

  7. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  8. Swiper 轮播插件 之 动态加载无法滑动

    1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...

  9. 关于Layui 响应式移动端轮播图的问题

    用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...

随机推荐

  1. 数据结构Java版之基数排序(四)

    基数排序: 基数排序分为两种:第一种是LSD ,从最低位开始排序, 第二种是 MSD 从最高位开始排.这里介绍第一种LSD排序算法. 首先,我们先了解什么是基数.基数是根据具体的排序情况而定的,比如我 ...

  2. INDY10 BASE64编码

    INDY10 BASE64编码 DELPHI自带的BASE64单元,在项目中使用发现非常没有效率,INDY10的好用. uses IdCoderMIME BASE64编码类:TIdEncoderMIM ...

  3. Python 使用scapy 时报:ImportError: cannot import name 'NPCAP_PATH' 解决

    解决办法:下载源码 https://github.com/secdev/scapy 下载完成后解压后里面有个scapy文件夹,把这个文件夹替换\Lib\site-packages\ 下的scapy 整 ...

  4. tp的增删改查的结果判断?

    参考: https://blog.csdn.net/qq_27930635/article/details/78853908 总之, 要用 全等 来判断, = = = 注意, 不要再用 mysql_a ...

  5. apache环境.htaccess设置301跳转及常用.htaccess技巧整理

    apache环境.htaccess设置301跳转及常用.htaccess技巧整理 无论是Nginx,还是Apache都各自有优势,对于我们普通用户而言基本上也没有多大的区别.在虚拟主机环境中,基本上都 ...

  6. Linux下查看根目录各文件内存占用情况

    一.服务器运行一点时间后各种的项目文件,日志文件,数据库备份登,会越来越多,在linux下可以使用 du 和 df 命令查看. 1.df -h 命令查看整体磁盘使用情况 2. 使用 du -ah -- ...

  7. (转) centos7 RPM包之rpm命令

    原文:https://blog.csdn.net/capecape/article/details/78529159 RPM包与源码包的区别1.软件包分类 源码包:C源代码包 rpm包:编译之后的二进 ...

  8. 解决 android push framework.jar 不生效的问题

    . . . . . 在 Android 采用 ART 虚拟机后,为了提高运行时效率,在编译期间会将 jar 包中的 dex 文件编译为 odex.vdex 等文件.而这些文件并不存放在 framewo ...

  9. OpenShift 4.1 演示

    功能演示主要包含三个方面. 1. 管理控制台 push镜像发布应用 podman build -t mytomcat:slim . podman tag localhost/mytomcat:slim ...

  10. 爬虫笔记之teambition登录验证码

    一.缘起 想做的事情太多,计划乱糟糟,想找个工具理一下,想起来了的很久之前用过teambition,打算看一下,然后在登录界面看到一个比较有意思的验证码: 这种倒是比较有意思哈,看着像是模仿12306 ...