Question

我通过尝试metafizzy来提供虚拟性。工作得很好，但在更新页面后，新加载的图库不起作用。如何在ajax加载后重新初始化flickity？我使用js-flickity类来初始化脚本。

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

Answer 1

我知道它有点太晚了，但无论如何我都会发布它，因为它可能会帮助其他人。

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

将元素追加到容器后，查找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]);
    }
}

更新

注意到仍然很少有人在看这个问题。所以这是一个更新的解决方案，它还支持数据属性中定义的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();

完整示例代码 -

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.pkgd.min.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.min.css">

<button class="button button--toggle">Re Create Flickity</button>

<div class="carousel">
  <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>

Answer 3

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

.flickity('resize');

Answer 4

发生在我身上，我发现您必须确保选择一个元素，否则它将仅显示最后一个元素而不起作用。

执行以下操作，其中selectIndex是您要默认选择的幻灯片：

$carousel.flickity('selectCell', selectIndex, true, true);

Answer 5

这是我的解决方案：成功后，我们传递来自AJAX请求的数据响应，然后清空轮播包装器（包装整个轮播的外部div），然后附加最初的产品轮播空的。然后，我通过该产品轮播中的for循环附加每个产品。完成后，我将加载轮播选项，然后创建分配给该轮播的Flickity对象，而无需运行任何其他脚本来加载该轮播。

success: function(data) {
  let productsCarousel = '<div id="productsCarousel" class="products-slider carousel" products-carousel></div>';
  $("#productsWrapper").empty().append(productsCarousel);
  for (let i = 0; i < data.products.length; i++) {
      // Carousel logic
      let foundProduct = '<div class="...classes here..."> <div class="carousel-cell carousel-cell-centered"> ... data.products[i] and other HTML here ...</div></div>';
      $("#productsCarousel").append(foundProduct);
  }
},
complete: function() {
  // Products slider options
  var productOptions = {
      imagesLoaded: true,
      wrapAround: true,
      autoPlay: 5000,
      prevNextButtons: true,
      pageDots: false,
  };
// Products carousel setup
var productsCarousel = document.querySelector('#productsCarousel');
var productsFlickity = new Flickity(productsCarousel, productOptions);

Answer 6

与此同时也有问题，这篇文章帮助我解决了Vanilla JS的问题。 Vanilla JS解决方案-动态清除并重新加载数据后，无需删除Flickity转盘/重新加载页面，即可“重新初始化” Flickity转盘）

function reloadCarousel(data) {
  var oldCells = document.getElementsByClassName("carousel-cells"); 
  yourFlickityCarousel.remove(oldCells); // takes an array of elements
  for (var i = 0; i < data.length; i++) {
    var newCell = processData(data[i]);
    yourFlickityCarousel.append(newCell);
  }
  // this makes sure viewport realigns to first item
  // in doing so, normal carousel functionality is restored
  flkty.selectCell(0, true);  
}

也有一个非常类似的问题-使用Vanilla JS，我需要清除一个Flickity轮播，并通过AJAX Load通过JSON通过JSON重新填充新的或修改的单元格（有些可以进行编辑，有些可以删除，也可能有新单元格，等等）

问题是通过flkty.remove()清除了旋转木马后，滚动被“卡住”在一张幻灯片上。似乎即使重新添加了幻灯片，Flickity仍认为在删除后轮播的“大小”是相同的。（可以将其拉出，但始终会弹回到相同的单一视图）。

这最终成为一种“清除现有轮播并刷新”的好方法。

来源：https://flickity.metafizzy.co/api.html#remove

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

6 个答案: