JavaScript响应式轮播图插件–Flickity
简介
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的更多相关文章
- 第二百五十一节,Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...
- 移动web——bootstrap响应式轮播图
基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...
- Bootstrap 学习笔记 项目实战 响应式轮播图
左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
- 原生js实现响应式轮播图,支持电脑端点击切图,手机端滑动切图
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
- 原生JavaScript(js)手把手教你写轮播图插件(banner)
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- 学习笔记: js插件 —— SuperSlide 2 (轮播图插件,PC用)
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
随机推荐
- LeetCode之LCP(Longest Common Prefix)问题
这个也是简单题目.可是关键在于题意的理解. 题目原文就一句话:Write a function to find the longest common prefix string amongst an ...
- Codeforces Round #390 (Div. 2) D. Fedor and coupons
题意:题目简化了就是要给你n个区间,然后让你选出k个区间 使得这k个区间有公共交集:问这个公共交集最大能是多少,并且输出所选的k个区间.如果有多组答案,则输出任意一种. 这题是用优先队列来处理区 ...
- double型转换成string型
double型转换成string型 题目描写叙述: 如有一个函数.其可接受一个long double參数,并将參数转换为字符串.结果字符串应保留两位小数,比如,浮点值123.45678应该生成&quo ...
- hdu1542 线段树+扫描线+离散化
仅仅想说题目给的欲实际不服 还是这类型的水题吧 建议看之前我写的那个 #include<stdio.h> #include<string.h> #include&l ...
- winrar
winrar 破解方法 1.安装winrar试用版: 2.在winrar安装文件夹下新建一个文本文件,文件名为rarreg.key: 3.用记事本打开该文件,将下面内容复制到文件中,并存盘,搞定! R ...
- 微信小程序初探(一、简单的数据请求)
微信小程序出来有一段时间了,之前没看好小程序(觉得小程序体验不咋好,内心对新事物有抵触心里,请原谅我的肤浅[捂脸][捂脸]),不过后来偶然之间玩过小程序的游戏(跳一跳.球球大作战.猜画小歌 等),顿悟 ...
- 【POJ 2676】 Sudoku
[题目链接] http://poj.org/problem?id=2676 [算法] 深度优先搜索 [代码] #include <algorithm> #include <bitse ...
- go之切片
一.概念 关于切片 1.切片是对数组一个连续片段的引用,所以切片是一个引用类型 2.切片是数组一样可以索引,可以通过len函数获取切片的数据长度.(数组也可以通过len获取) 3.切片是一个长度可变的 ...
- 2015 多校赛 第四场 1010 (hdu 5336)
Problem Description XYZ is playing an interesting game called "drops". It is played on a r ...
- Java 介绍比较全面的一遍文章
Java简介 Java是由Sun Microsystems公司于1995年5月推出的Java程序设计语言(以下简称Java语言)和Java平台的总称.用Java实现的HotJava浏览器(支持Java ...