JavaScript响应式轮播图插件–Flickity
2024-08-26 14:16:37
简介
flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式、循环滚动、自动播放、是否支持拖动、是否开启分页、是否自适应窗口等。
在线演示及下载
使用方法
引入文件
<link rel="stylesheet" href="flickity.css" media="screen">
<script src="flickity.min.js"></script>
html
增加js-flickity class到对象.
<div class="gallery js-flickity">
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
...
</div>
调用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。
<div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }'>
参数
参数 | 描述 | 默认值 |
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 |
最新文章
- OSGI.NET 框架浅析
- Javascript中二级联动
- C标准库函数实现之strstr(转)
- codeforces 615D - Multipliers
- jdk各版本新特性
- linux文件系统拓展属性
- Pow(x, n) leetcode
- Java并发与同步
- git 的常用命令
- Array.find()和Array.findIndex()
- Python,是什么让我遇见你
- mingw zlib-1.2.11 win32-static.patch
- php+mysql 解决emoji问题
- Linux 运维测试及第三应用及测试工具
- Spring Boot 容器选择 Undertow 而不是 Tomcat
- <;基础>; PHP 进阶之 抽象类(abstract)、接口(interface)、Trait(特征)
- [tixml]保存,读取
- Python之subprocess模块、sys模块
- Windows下安装Apache 2.2.21图文教程
- 二进制转化 - bitset
热门文章
- android.os.TransactionTooLargeException
- C++ Primer 学习笔记_5_变量和基本类型(续2)
- IOS6.0自带下拉刷新控件UIRefreshControl
- UI设计---&;gt;全心全意为人民服务的宗旨----&;gt;注重客户体验---&;gt;软件持久的生命力
- Atitit. C# java 的api 文件夹封装结构映射总结
- poj 3662 Telephone Lines(最短路+二分)
- [Swift]LeetCode1064. 不动点 | Fixed Point
- MyEclipse配置https
- var _this = this 是干什么的
- 如何通过putty软件远程登录并且控制linux平台