JavaScript响应式轮播图插件–Flickity

2015-05-05阅读(15898)评论(2)牵着狗狗看MM

苏州实时公交查询

flickity
今天为大家分享一款用于创建响应式轮播图的JS插件–Flickity,该插件不仅支持PC端还支持移动端触摸屏并有多种表现方式。

快速使用

  1. 下载2个文件 flickity.cssflickity.pkgd.min.js

  2. 把Flickity的.css.js 文件添加到页面中,如下:

    [html]<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
    [/html]

    [html]<script src="/path/to/flickity.pkgd.min.js"></script>
    [/html]

  3. 增加js-flickity class到对象.

  4. [html]<div class="gallery js-flickity">
    <div class="gallery-cell"></div>
    <div class="gallery-cell"></div>

    </div>
    [/html]

下载

CDN

[html]<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.css">
<!– or –>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.min.css">
[/html]

[html]<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.pkgd.js"></script>
<!– or –>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.2/flickity.pkgd.min.js"></script>
[/html]

调用方法

第一种:

类似jQuery的方法: $('selector').flickity().

[js]$(‘.main-gallery’).flickity({
// options
cellAlign: ‘left’,
contain: true
});
[/js]

第二种:
Vanilla JavaScript的方法:

[js]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
});
[/js]

第三种:
你同样可以在HTML中就可以调用Flickity,无需编写任何JavaScript。

[html]<div class="main-gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }’>
[/html]

功能选项

wrapAround

循环从一端滑向另一端

[js]wrapAround: true[/js]

freeScroll

内容可以自由滚动,在末端没有内容时,便不能滚动。

[js]freeScroll: true[/js]

通过设置freeScrollcontain,可以变为一个简单的水平滚动。

[js]freeScroll: true,
contain: true,
// disable previous & next buttons and dots
prevNextButtons: false,
pageDots: false[/js]

autoPlay

自动播放,鼠标悬停或点击时,停止播放,鼠标离开继续自动播放。

[js]autoPlay: true
// 默认为每隔3秒切换,也可以设置为数字,如1500,效果可以打开旁边的Codepan链接进行修改[/js]

Images

纯图片轮播。
[html]<div class="gallery js-flickity" data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }’>
<img src="orange-tree.jpg" alt="orange tree" />
<img src="submerged.jpg" alt="submerged" />
<img src="look-out.jpg" alt="look-out" />

</div>
[/html]

imagesLoaded

如果图片没有大小,则会脱离容器位置。使用imagesLoaded就可以解决这个问题

[js]imagesLoaded: true[/js]

官网:http://flickity.metafizzy.co/

赞(2) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » JavaScript响应式轮播图插件–Flickity
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏