Refresh flicks after refreshing a page with ajax call

Question

I am attempting a metaphysis. Works great, but after refreshing the page, the newly loaded gallery will not work. How can I reinitialize flickie after loading ajax? I am using the js-flickity class to initialize a script.

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

Answer 1

I know this is too late, but I will post it anyway, as this may help someone else.

I have not tried the size solution presented above, but so I did.

After adding your elements to the container, find the elements js-flickity, see if you can get the data of the object using the method data, and if it undefined initializes the flickering of this element.

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

Hide result

Answer 3

Try resizing after loading content:

.flickity('resize');