Lagging dragable video carousel with Slick.js

Design help Custom code
1

Hi all,
I’m creating a portfolio page with a video carousel using Slick.js with some custom code. Somehow when i try to drag the videos and it’s very laggy. Any suggestions? Thank you

Here is my site Read-Only: https://preview.webflow.com/preview/khoi-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=khoi-portfolio&preview=03107e7b47b22e5d76831887974a3b4f&pageId=5f13c207911bc7c4c3b9553d&mode=preview
(how to share your site Read-Only link)

2

Hi @KhoiNguyen,

I would try to CDN the latest version of the slick.js script first instead of pulling them from a Github account. Also I would rather choose a minified version (min) of the js and css scripts than the beautified ones… faster to load / execute.

CSS:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

JavaScript:

<script>
$(document).ready(function() {
    $('.video').slick({
    		centerMode: true,
        dots: true,
        infinite: true,
        arrows: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        draggable: true
    });
});
</script>
3

Hello thank you for your solution, I just imported the new CDN and it’s still lagging on drag. Should i try to remove all the styling in css?

4

Hello, would you have a live website link for us to have a look at ?

5

Yes, here it is. Can you also help me to figure out how to pause video when on new slide?

https://khoi-portfolio.webflow.io/motion-design

Here is the new share link just in case: https://preview.webflow.com/preview/khoi-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=khoi-portfolio&preview=6ee5a3f80df1ec2660d4d9f01dbd5230&pageId=5f13c207911bc7c4c3b9553d&mode=preview