javascript - 通过ajax调用更新页面后重新初始化flickity

Question

我正在通过 metafizzy 尝试轻弹。工作得很好，但更新页面后，新加载的画廊将无法运行。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]);
    }
}

更新：

注意到仍然很少有人还在看这个问题。所以这里有一个更新的解决方案，它还支持在数据属性中定义的 flickity carousel 选项（可选）。

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 加载通过 JSON 用新的或修改的单元格重新填充它（有些可能被编辑，其他可能被删除，也可能有新的单元格， ETC）

问题是在通过滚动清除轮播后flkty.remove()“卡在”一张幻灯片上。似乎即使重新附加了幻灯片，Flickity 仍然认为删除后轮播的“大小”是相同的。（可以拉它，但总是会反弹回相同的单一视图）。

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

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