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 }'
>
|
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'
。
cellAlign: 'left'
// default 'center'
cellAlign: 'right'
wrapAround
该参数可用于制作无限循环的幻灯片。设置为true
时为无限循环。默认值为false
。
wrapAround: true
contain
在幻灯片的开始或结束处包含一个单元格,防止幻灯片溢出。可选值为true
和false
。默认值为false
。
contain: true
freeScroll
允许自由滚动,最后一个单元格没有对齐格子。可选值为true
和false
。默认值为false
。
freeScroll: true
允许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
|
源码及实例下载:http://download.csdn.net/detail/nature_fly088/9624126
还有一些用法请参考演示页面中的说明。