通过ajax调用更新页面后重新启动flickity

Question

我试着通过metafizzy给予flickity.工作得很好,但在更新页面后,新加载的图库将无法运行.如何在ajax加载后重新初始化flickity？我使用js-flickity类来初始化脚本.

<div class="gallery js-flickity">
...
</div>

Answer 1

我知道这有点太晚了,但我会发布它,因为它可能会帮助别人.

还没有尝试过上面提交的调整大小解决方案,但这就是我做到的.

将元素追加到容器后,查找js-flickity元素,查看是否可以使用data方法获取对象数据,如果未定义,则初始化该元素的flickity.

var nodeList = document.querySelectorAll('.js-flickity');

for (var i = 0, t = nodeList.length; i < t; i++) {
    var flkty = Flickity.data(nodeList[i]);
    if (!flkty) {
        new Flickity(nodeList[i]);
    }
}

更新:

注意到仍然很少有人在看这个问题.所以这是一个更新的解决方案,它还支持在data属性中定义的flickity轮播选项(可选).

var nodeList = document.querySelectorAll('.js-flickity');

for (var i = 0, t = nodeList.length; i < t; i++) {
    var flkty = Flickity.data(nodeList[i]);
    if (!flkty) {
        // Check if element had flickity options specified in data attribute.
        var flktyData = nodeList[i].getAttribute('data-flickity');
        if (flktyData) {
            var flktyOptions = JSON.parse(flktyData);
            new Flickity(nodeList[i], flktyOptions);
        } else {
            new Flickity(nodeList[i]);
        }
    }
}

Answer 2

你可以这样做-

//Destroy
$carousel.flickity('destroy');
//Re-init
$carousel.flickity();

完整示例代码-

//Destroy
$carousel.flickity('destroy');
//Re-init
$carousel.flickity();

var $carousel = $('.carousel').flickity();
var isFlickity = true;
// toggle Flickity on/off
$('.button--toggle').on( 'click', function()
{
	//Clearing previous contents
	$carousel.flickity('destroy');
	$('.carousel').empty();
	
	$(".carousel").append('<div class="carousel-cell"></div>');
	$(".carousel").append('<div class="carousel-cell"></div>');

	// init new Flickity
	$carousel.flickity();
});

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

.flickity-enabled .carousel-cell {
	margin-bottom: 0;
}

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

Answer 3

尝试在内容加载后调用 resize：

.flickity('resize');