响应式轮播图幻灯特效插件Flickity.js

今天益吾库为大家分享一款用于创建响应式轮播图的JS插件Flickity.js，该插件不仅支持PC端还支持移动端触摸屏并有多种表现形式。下载1个样式文件flickity.css和1个脚本文件flickity.pkgd.min.js即可使用。

应用代码示例

<link rel="stylesheet" href="path/flickity.css" media="screen">
<script src="path/flickity.pkgd.min.js"></script>
<div class="gallery js-flickity">
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
  ...
</div>
<script>
$('.main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});
</script>

点击这里去CodePen上查看Demo

原生js写法

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

也可以在HTML中以参数形式启用Flickity，而无需编写任何JavaScript

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

参数

var flky = new Flickity( '.gallery', {

  // options, defaults listed

 

  accessibility: true,

  // enable keyboard navigation, pressing left & right keys

 

  autoPlay: false,

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

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

 

  cellAlign: 'center',

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

 

  cellSelector: undefined,

  // specify selector for cell elements

 

  contain: false,

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

 

  draggable: true,

  // enables dragging & flicking

 

  freeScroll: false,

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

 

  friction: 0.2,

  // smaller number = easier to flick farther

 

  imagesLoaded: false,

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

 

  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,

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

 

  wrapAround: false

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

 

});