简介

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

JavaScript响应式轮播图插件–Flickity的更多相关文章

  1. 第二百五十一节,Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  2. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  3. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  4. 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  5. 原生JavaScript(js)手把手教你写轮播图插件(banner)

    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...

  6. 第124天:移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  7. 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  8. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  9. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

随机推荐

  1. LeetCode之LCP(Longest Common Prefix)问题

    这个也是简单题目.可是关键在于题意的理解. 题目原文就一句话:Write a function to find the longest common prefix string amongst an ...

  2. Codeforces Round #390 (Div. 2) D. Fedor and coupons

    题意:题目简化了就是要给你n个区间,然后让你选出k个区间  使得这k个区间有公共交集:问这个公共交集最大能是多少,并且输出所选的k个区间.如果有多组答案,则输出任意一种.   这题是用优先队列来处理区 ...

  3. double型转换成string型

    double型转换成string型 题目描写叙述: 如有一个函数.其可接受一个long double參数,并将參数转换为字符串.结果字符串应保留两位小数,比如,浮点值123.45678应该生成&quo ...

  4. hdu1542 线段树+扫描线+离散化

    仅仅想说题目给的欲实际不服     还是这类型的水题吧   建议看之前我写的那个 #include<stdio.h> #include<string.h> #include&l ...

  5. winrar

    winrar 破解方法 1.安装winrar试用版: 2.在winrar安装文件夹下新建一个文本文件,文件名为rarreg.key: 3.用记事本打开该文件,将下面内容复制到文件中,并存盘,搞定! R ...

  6. 微信小程序初探(一、简单的数据请求)

    微信小程序出来有一段时间了,之前没看好小程序(觉得小程序体验不咋好,内心对新事物有抵触心里,请原谅我的肤浅[捂脸][捂脸]),不过后来偶然之间玩过小程序的游戏(跳一跳.球球大作战.猜画小歌 等),顿悟 ...

  7. 【POJ 2676】 Sudoku

    [题目链接] http://poj.org/problem?id=2676 [算法] 深度优先搜索 [代码] #include <algorithm> #include <bitse ...

  8. go之切片

    一.概念 关于切片 1.切片是对数组一个连续片段的引用,所以切片是一个引用类型 2.切片是数组一样可以索引,可以通过len函数获取切片的数据长度.(数组也可以通过len获取) 3.切片是一个长度可变的 ...

  9. 2015 多校赛 第四场 1010 (hdu 5336)

    Problem Description XYZ is playing an interesting game called "drops". It is played on a r ...

  10. Java 介绍比较全面的一遍文章

    Java简介 Java是由Sun Microsystems公司于1995年5月推出的Java程序设计语言(以下简称Java语言)和Java平台的总称.用Java实现的HotJava浏览器(支持Java ...