jQuery适合移动设备触摸屏的响应式幻灯片插件

• 插件介绍

  flickity是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果，可以自动播放，是一款移动优先的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'。

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

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

本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Slideshow-Scroller/201501291294.html