question

MuhammadAli-8269 avatar image
0 Votes"
MuhammadAli-8269 asked Bruce-SqlWork answered

slick-carousel not working with Partial View data

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.

dotnet-aspnet-core-mvc
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

you really should read the documentation that comes with the "slick-carousel" library to learn how to use the library properly. Overwriting HTML can break JavaScript references to HTML elements that were created when the page initially loaded. Typically, data is changed not the HTML. Anyway, the "slick-carousel" library documentation should have the information you need.

Also, the slick-carousel project has not been updated for several years. You might need to find a modern carousel library.

0 Votes 0 ·
Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered

see add/remove slide in documentation:

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

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

BruceBarker-8516 avatar image
0 Votes"
BruceBarker-8516 answered MuhammadAli-8269 commented

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.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@BruceBarker-8516 Thanks for your input.
Can you please elaborate "add and remove options" ?

0 Votes 0 ·