I’m building a light fixture e-commerce site using the Slick library to display product images in a gallery. The gallery initializes correctly on page load, but when I append new content via AJAX, the newly added images don’t work with the Slick functionality. Here’s the relevant code:
HTML:
<div id=”gallery-container”>
<div class=”gallery”>
</div>
</div>
JavaScript:
$(document).ready(function() {
$(‘.gallery’).slick(); // Initialize the gallery on page load
});
// AJAX to load more content
$.ajax({
url: ‘load-more.php’,
success: function(data) {
$(‘#gallery-container’).append(data);
// The new content is added but the gallery isn’t reinitialized
}
});
I tried calling .slick() after the content was appended, but it didn’t solve the problem. The new images appear as regular static images without the carousel functionality.
How can I ensure the gallery reinitializes properly after new content is appended?