Nothing is working about vue-slick

[mooc0705]

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

This is how I solved the problem. Add 'slick-carousel/slick/slick-theme.css' should fix the problem

[cviebrock]

I needed to make sure the containing element of the <slick> component had a defined width. 😞

[henridelozanne]

I had the same problem, solved it by adding

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>

in my index.html head

[staskjs]

This most likely has nothing to do with vue-slick, because it is just a wrapper for vue. You should better address your question to original plugin authors. But I think this is just a css problem.

[FrancescoSaverioZuppichini]

I just follow the guideline, that's it.

[mbarwick83]

I'm also getting this issue too.

[staskjs]

I would suggest adding slick css from node_modules/slick-carousel/slick/slick.css

[cviebrock]

I'm having this issue as well, but I traced it back to the fact that the HTML element that held my slick component was part of a CSS Grid element with a variable width. i.e.:

<div class="grid" style="display: grid; grid-template-columns: 200px 1fr;">
    <div class="sidebar">...</div>
    <div class="main">
        <slick ...>...</slick>
    </div>
</div>

I think in this case, the plugin can't determine the width of the slick-track, so everything goes a bit nuts.

EDIT: Yup ... this has been reported: kenwheeler/slick#2959

[jzucadi]

So what do you do, the link doesn't have a solution that works

[Bobur-kobilov]

How I solved it:
import './../node_modules/slick-carousel/slick/slick.css';

[P-James]

I had this issue after running npm run prod
So I also added the cdn links to the css in my template and it works