使用 HTML 初始化时的 Flickity 完成事件答案

【问题标题】：Flickity complete event when initialized with HTML使用 HTML 初始化时的 Flickity 完成事件
【发布时间】：2016-07-26 16:04:39
【问题描述】：

当 Flickity 完成初始化后，是否有我可以收听的事件？

使用JavaScript初始化时，我可以自己触发一个事件，但是使用这个设置我没有任何线索。

用 HTML 初始化
http://flickity.metafizzy.co/#initialize-with-html

<div data-flickity='{ … }'>
  …
</div>

目前，我正在检查 Flickity 是否生成了它的 DOM 元素，但这不是很优雅。 :-)

【问题讨论】：

你找到什么了吗？
没什么新鲜事

标签： flickity

【解决方案1】：

你可以试试这个：

Flickity.prototype.on('激活',function(){ 警报（“活动”）}）；

Flickity.prototype.on( 'activate',function(){
alert("active")});

/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: gallery-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<!-- Flickity HTML init -->
<div class="carousel" id="carousel" data-flickity>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

【讨论】：