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方法的轮播图插件, ...
随机推荐
- linux下启动jekins报错
进入默认安装目录,执行java -jar jekins.war 启动使用端口号: java -jar jenkins.war --httpPort=8085,即启动完成 这个有个弊端,关闭后下次还得这 ...
- JDK框架简析--java.lang包中的基础类库、基础数据类型
题记 JDK.Java Development Kit. 我们必须先认识到,JDK不过,不过一套Java基础类库而已,是Sun公司开发的基础类库,仅此而已,JDK本身和我们自行书写总结的类库,从技术含 ...
- hdu(1114)——Piggy-Bank(全然背包)
唔..近期在练基础dp 这道题挺简单的(haha).可是我仅仅想说这里得注意一个细节. 首先题意: 有T组例子,然后给出储蓄罐的起始重量E,结束重量F(也就是当它里面存满了零钱的时候).然后给你一个数 ...
- ASP.NET MVC 客户端验证失败后表单仍然提交问题
客户端验证失败后表单仍然提交问题!导致页面刷新,辛辛苦苦输入的内容荡然无存. 多么奇怪的问题.按道理,验证失败,就应该显示各种错误信息,不会提交表单才对.而现在,错误信息正常显示,但页面却刷新了一遍. ...
- oc60--Category 分类 练习
// main.m // Category练习 #import <Foundation/Foundation.h> #import "NSString+NJ.h" // ...
- SQL数据库问题 解释一下下面的代码 sql 存储过程学习
SQL数据库问题 解释一下下面的代码 2008-08-13 11:30wssqyl2000 | 分类:数据库DB | 浏览1154次 use mastergocreate proc killspid( ...
- HDU 2665(主席树,无修改第k小)
Kth number Time Limit: 15000/5000 MS (Java/Others) ...
- 把一个文件夹下的多个csv文件合并到一个excel的多个sheet
#!/usr/bin/env python3 # -*- coding: UTF-8 -*- import pandas as pd import os import re if __name__ = ...
- 80.用户管理 Extjs 页面
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...
- POJ 3264 线段树 ST
题意:给你一个数列,从中挑一段,问你这段数的最大值减最小值是多少. 思路:线段树. // by Sirius_Ren #include <cstdio> #include <algo ...