html轮播图思路,JavaScript响应式轮播图插件–Flickity

今天为大家分享一款用于创建响应式轮播图的JS插件–Flickity，该插件不仅支持PC端还支持移动端触摸屏并有多种表现方式。

快速使用

把Flickity的.css和.js 文件添加到页面中，如下：

[html]

[/html]

[html]

[/html]

增加js-flickity class到对象.

[html]

…

[/html]

下载

CDN

[html]

[/html]

[html]

[/html]

调用方法

第一种：

类似jQuery的方法: $('selector').flickity().

[js]$(‘.main-gallery’).flickity({

// options

cellAlign: ‘left’,

contain: true

});

[/js]

第二种：

Vanilla JavaScript的方法：

[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

});

[/js]

第三种：

你同样可以在HTML中就可以调用Flickity，无需编写任何JavaScript。

[html]

…

[/html]

imagesLoaded

如果图片没有大小，则会脱离容器位置。使用imagesLoaded就可以解决这个问题

[js]imagesLoaded: true[/js]