JavaScript响应式轮播图插件–Flickity

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

苏州实时公交查询

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

快速使用

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

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

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

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

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

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

下载

CDN

<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">

<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>

调用方法

第一种:

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

$('.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 }'>

功能选项

wrapAround

循环从一端滑向另一端

wrapAround: true

freeScroll

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

freeScroll: true

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

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

autoPlay

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

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

Images

纯图片轮播。

<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>

imagesLoaded

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

imagesLoaded: true

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

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

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

支付宝扫一扫打赏

微信扫一扫打赏