I'm giving flickity by metafizzy a try. Working great but after updating the page the newly loaded gallery won't function. How can I reinitialize flickity after ajax load? I use the js-flickity class to initialize the script.
<div class="gallery js-flickity">
...
</div>
I know it's a bit too late, but I'll post it anyway as it might help someone else.
Haven't tried the resize solution submitted above, but this is how I did it.
After you append your elements to your container, look for the js-flickity elements, see if you can get the object data using data method, and if it's undefined initialise flickity on that 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]);
}
}
Update:
Noticed that there's still quite few people still looking at this question. So here's an updated solution, that also supports flickity carousel options defined in data attribute (optional).
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]);
}
}
}
You can do it like this-
//Destroy
$carousel.flickity('destroy');
//Re-init
$carousel.flickity();
Full example code-
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>
Happened to me and I figured out you have to make sure you Select an Element or it will just show the last one without functioning.
Do something like this where selectIndex is the slide you want selected by default:
$carousel.flickity('selectCell', selectIndex, true, true);
Here's my solution: on success, we pass in the data response from the AJAX request, then I empty the carousel wrapper (an external div that wraps the whole carousel), and then append the product carousel which initially it'll be empty. Then I append each product through a for loop inside this product carousel. On complete, I load the carousel options, then I create the Flickity object asigned to the carousel, no need to run any other scripts for loading the carousel.
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);
Also had problems with this and this post helped me resolve issue for Vanilla JS. Vanilla JS solution - 'reinitializing' Flickity carousel after dynamically cleared and reloaded data and without removing Flickity carousel / reloading page)
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);
}
Had a very similar problem problem as well - using Vanilla JS I needed to clear out a a Flickity carousel and repopulate it with new or modified cells via JSON via AJAX Load (some may be edited, others may be deleted, may also have new cells, etc)
Issue was after clearing out the Carousel via flkty.remove() the scrolling was 'stuck' on a single slide. Seems even though the slides were re-appended Flickity still thought 'size' of carousel was the same after the remove. (Could pull it but would always bounce back to same single view).
This ended up working as a good way to just 'clear out existing carousel and refresh it'
