幻灯片轮播图-jQuery触摸屏的响应式幻灯片插件

flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。

安装方法

可以通过Bower或npm来安装：

Bower: bower install flickity --save
npm: npm install flickity --save

使用方法

要使用该幻灯片插件首先要在页面中引入 flickity.pkgd.js 和 flickity.css 文件。该幻灯片的HTML结构如下：

<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
<script src="/path/to/flickity.pkgd.min.js"></script>

<div class="gallery">
  <div class="cell">...</div>
  <div class="cell">...</div>
  <div class="cell">...</div>
  ...
</div>

你可以将该幻灯片插件当做一个jquery插件来调用：$('selector').flickity()

$('#main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

你也可以使用纯js来调用该插件：new Flickity( elem )。Flickity()构造函数接收两个参数：幻灯片元素和参数选项。

var elem = document.querySelector('#main-gallery');
var flicky = new Flickity( elem, {
  // options
  cellAlign: 'left',
  contain: true
});
// element argument can be a selector string
//   for an individual element
var flicky = new Flickity( '#main-gallery', {
  // options
});

你还可以在HTML中初始化Flickity插件，不用写任何的js代码。你只需要在幻灯片元素上添加class js-flickity，可以通过data-flickity-options属性来设置参数。

<div id="main-gallery" class="js-flickity"
  data-flickity-options='{ "cellAlign": "left", "contain": true }'>

在HTML中设置的参数必须是正确的JSON格式的数据。JSON数据中，keys需要双引号引起来。注意：data-flickity-options属性的值用单引号，JSON数据的值用双引号。

Flickity对象的构造函数：

var flky = new Flickity( '.gallery', {
  // options, defaults listed
  accessibility: true,
  // enable keyboard navigation, pressing left & right keys
  autoPlay: false,
  // advances to the next cell
  // if true, default is 3 seconds
  // or set time between advances in milliseconds
  // i.e. `autoPlay: 1000` will advance every 1 second
  cellAlign: 'center',
  // alignment of cells, 'center', 'left', or 'right'
  // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)
  cellSelector: undefined,
  // specify selector for cell elements
  contain: false,
  // will contain cells to container
  // so no excess scroll at beginning or end
  // has no effect if wrapAround is enabled
  draggable: true,
  // enables dragging & flicking
  freeScroll: false,
  // enables content to be freely scrolled and flicked
  // without aligning cells
  friction: 0.2,
  // smaller number = easier to flick farther
  imagesLoaded: false,
  // if imagesLoaded is present, Flickity can re-position cells
  // once images are loaded
  initialIndex: 0,
  // zero-based index of the initial selected cell
  percentPosition: true,
  // sets positioning in percent values, rather than pixels
  // Enable if items have percent widths
  // Disable if items have pixel widths, like images
  prevNextButtons: true,
  // creates and enables buttons to click to previous & next cells
  pageDots: true,
  // create and enable page dots
  resizeBound: true,
  // listens to window resize events to adjust size & positions
  watchCSS: false,
  // watches the content of :after of the element
  // activates if #element:after { content: 'flickity' }
  // IE8 and Android 2.3 do not support watching :after
  // set watch: 'fallbackOn' to enable for these browsers
  wrapAround: false
  // at end of cells, wraps-around to first for infinite scrolling
});

可用参数

cellAlign

幻灯片元素中的单元对齐方式。可选值为：'center', 'left', 'right'。默认值为'center'。

wrapAround

该参数可用于制作无限循环的幻灯片。设置为true时为无限循环。默认值为false。

contain

在幻灯片的开始或结束处包含一个单元格，防止幻灯片溢出。可选值为true和false。默认值为false。

freeScroll

允许自由滚动，最后一个单元格没有对齐格子。可选值为true和false。默认值为false。

允许freeScroll和contain可制作简单的水平滚动。

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

freeScroll和contain设置为true的效果：

freeScroll: true,
wrapAround: true

autoPlay

设置自动播放。如果autoPlay: true则每3秒切换一次。幻灯片切换的速度单位是毫秒，例如设置为autoPlay: 1500则1.5秒切换一次。

在鼠标滑过幻灯片时，自动播放将停止，鼠标离开后重新开始自动播放。幻灯片被点击或单元格被选择时，自动播放也会停止。

可选值：true和false或一个整数。默认值为false。

autoPlay: true

watchCSS

你可以通过CSS来使用或禁用Flickity。watchCSS选项关注幻灯片元素的:after伪元素的内容。如果:after伪元素的content是flickity则幻灯片可用。

IE8和Android 2.3不支持:after。当设置watchCSS: true时Flickity不可用。可以在这些浏览器上设置watchCSS为'fallbackOn'来使用Flickity。

watchCSS: true

/* enable Flickity by default */
.gallery:after {
    content: 'flickity';
    display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
    /* disable Flickity for large devices */
    .gallery:after {
        content: '';
    }
}

使用图片

Flickity可以制作效果很酷的图片幻灯片特效。

<div class="gallery js-flickity"
  data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }'>
  <img src="1.jpg" alt="orange tree" />
  <img src="2.jpg" alt="submerged" />
  <img src="3.jpg" alt="look-out" />
  ...
</div>

imagesLoaded
没有价值的图片是没有尺寸的，它们会跑到单元格之外。为了修补这个问题，可以使用imagesLoaded来将图片重新定位。

可选值：true和false，默认值为false。

imagesLoaded: true

该选项需要在页面中引入 imagesLoaded 。

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

其它可选参数

accessibility: true,
// enable keyboard navigation, pressing left & right keys
cellSelector: undefined,
// specify selector for cell elements
draggable: true,
// enables dragging & flicking
initialIndex: 0,
// zero-based index of the initial selected cell
percentPosition: true,
// sets positioning in percent values, rather than pixels
// Enable if items have percent widths
// Disable if items have pixel widths, like images
pageDots: true,
// enables page dots
prevNextButtons: true,
// creates and enables buttons to click to previous & next cells
resizeBound: true,
// listens to window resize events to adjust size & positions
rightToLeft: false
// enables right-to-left ordering for right-to-left languages

还有一些用法请参考演示页面中的说明。

在线预览网盘下载

一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

安装方法

使用方法

Flickity对象的构造函数：

可用参数

cellAlign

wrapAround

contain

freeScroll

autoPlay

watchCSS

使用图片

其它可选参数

郑重声明：

发表评论取消回复

安装方法

使用方法

Flickity对象的构造函数：

可用参数

cellAlign

wrapAround

contain

freeScroll

autoPlay

watchCSS

使用图片

其它可选参数

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复