Web Development·12,097 discussions

[Wizard57M-TR]

How can I reinitialize Slick carousel after appending new content via AJAX

Tags: Web development

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?

• This topic was modified 1 week, 6 days ago by Wizard57M-TR.
• This topic was modified 1 week, 6 days ago by kees_b.

Topic

Reply To: How can I reinitialize Slick carousel after appending new content via AJAX

In reply to How can I reinitialize Slick carousel after appending new content via AJAX

From your comments, I’d say: reload the page. But maybe your comment is incorrect or incomplete.

[Author]

Replies