reit flickity после обновления страницы с помощью ajax-звонка

Question

Я даю мерцание метафиззи попыткой. Отлично работает, но после обновления страницы вновь загруженная галерея не будет работать. Как я могу повторно инициализировать фликзи после загрузки ajax? Я использую класс js-flickity для инициализации скрипта.

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

Answer 1

Попробуйте вызвать изменение размеров после загрузки содержимого:

.flickity('resize'); 

Answer 2

Я знаю, что это немного слишком поздно, но я выложу его в любом случае, как это может помочь кому-то еще.

Не пробовал решение для изменения размера, представленное выше, но так я это сделал.

После добавления ваших элементов в контейнере, обратите внимание на js-flickity элементов, если вы можете получить данные объекта с помощью метода data, и если это не определено Initialise 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]); 
    } 
} 

Answer 3

Вы можете сделать это, как this-

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

Полный пример code-

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

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
 
\t <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>