flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。
安装方法
可以通过Bower或npm来安装:
Bower: bower install flickity --save npm: npm install flickity --save
使用方法
要使用该幻灯片插件首先要在页面中引入 flickity.pkgd.js 和 flickity.css 文件。该幻灯片的HTML结构如下:
............
你可以将该幻灯片插件当做一个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
属性来设置参数。
在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'
。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可以制作效果很酷的图片幻灯片特效。
...imagesLoaded
没有价值的图片是没有尺寸的,它们会跑到单元格之外。为了修补这个问题,可以使用
imagesLoaded
来将图片重新定位。可选值:
true
和false
,默认值为false
。imagesLoaded: true
该选项需要在页面中引入 imagesLoaded 。
其它可选参数
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还有一些用法请参考演示页面中的说明。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!