slick-carousel not working with Partial View data

Question

Hi All
In asp.net core MVC I am working on product list page of e-commerce application. When product list page is displayed first time it shows all the products correctly and images of products in "slick-carousel" also perfectly.

But when I filter the list of products (by using ajax) and update only Div part (which shows list of product) using Partial View, then "slick-carousel" doesn't work correctly. It shows half circle spinning continuously at the place of images for all filtered products.

As of now what I have found that when first time page is loaded, all supporting JavaScript/jQuery and CSS files are loaded and they make links with html elements and classes etc. But when Partial View is inserted that Partial View's html elements don't make connections with JavaScript/jQuery functions which were loaded when complete page was loaded first time.

Appreciate if someone can give solution to this problem. Also note that I am using html theme which has a lot of JavaScript files which I have linked in _layout.cshtml file and this slick-carousel file is also referenced there. This "slick-carousel" function is not defined in product list page or partial view separately.

Answer 1

To directly update the html, you need to destroy the slick-carousel, update the html, and recreate the slick-carousel. This probably won’t look pretty. A better approach is to use the add and remove options.

Answer 2

see add/remove slide in documentation:

https://kenwheeler.github.io/slick/