浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2015-10-07

人气10192

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       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

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

contain: true

 

freeScroll

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

freeScroll: true

 

允许freeScrollcontain可制作简单的水平滚动。

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

freeScrollcontain设置为true的效果:

freeScroll: true,
              wrapAround: true
autoPlay

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

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

可选值:truefalse或一个整数。默认值为false

autoPlay: true
watchCSS

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

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>

 

 orange tree  submerged  look-out  freedom tower  drizzle  cat nose  

imagesLoaded

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

可选值:truefalse,默认值为false

imagesLoaded: true

 orange tree  submerged  look-out  freedom tower  drizzle  cat nose  

该选项需要在页面中引入 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

 

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

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:433.38KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-846.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery适合移动设备触摸屏的响应式幻灯片插件

我当前G币余额:0 已下载次数:3

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有0 评论)