使用Flickity.js实现的弹性图片轮播

图片切换时，会有一个来回晃动的缓冲效果。

图片轮播

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2999
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var flky = new Flickity('.gallery', {
    // options, defaults listed

accessibility: true,
    // enable keyboard navigation, pressing left & right keys

autoPlay: 3000,
    // 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

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

resize: true,
    // listens to window resize events to adjust size & positions

rightToLeft: false,
    // enables right-to-left layout

setGallerySize: true,
    // sets the height of gallery
    // disable if gallery already has height set with CSS

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: true
        // at end of cells, wraps-around to first for infinite scrolling

});

编译

CSS

HTML

图片切换时，会有一个来回晃动的缓冲效果。

图片轮播

编辑器支持Emmet

快捷键

图片切换时，会有一个来回晃动的缓冲效果。

图片轮播

TweenMax.js+delaunay.js 图片三角形分片成像动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：