響應式輪播圖幻燈特效插件Flickity.js

響應式輪播圖幻燈特效插件Flickity.js

今天益吾庫為大家分享一款用于創建響應式輪播圖的JS插件Flickity.js,該插件不僅支
0
  • 詳情內容
  • 留言點評

今天益吾庫為大家分享一款用于創建響應式輪播圖的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

 

});

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金