slick-carousel no erros but appearance is broken for slider of 3 elements

Question

i'm using slick js from https://kenwheeler.github.io/slick/ and it seems to work because when i drag my mouse, the elements are correctly selected but the visual of the slider is off (the elements should be in line, not on top of each other).

it also works when i click on the only visible nav button (there should be two)

has anyone ever encounter this problem or knows from which option this could be coming from?

here's the slick import (the slick-carousel version installed is 1.8.1):

var slick = require('slick-carousel/slick/slick');

here's the js config for sliders:

var slick3cols = {
    infinite:false,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows:false,
    dots: false,
    mobileFirst:true,
    responsive: [{
        breakpoint: 600,
        settings: {
            slidesToShow: 2,
        }
    },{
        breakpoint: 1023,
        settings: {
            slidesToShow: 3,
            dots: false,
            nav: true,
            arrows:true,
            nextArrow: '<div class="slide-next"></div>',
            prevArrow: '<div class="slide-prev"></div>',
        }
    }],
};

here's the html:

<div class="slider slider3cols nav-blue slider-large column is-12 flex align-center justify-center">
{% for card in cards %}
    <a href="#" class="card flex" data-type="evenement">
        <div class="card-content">
            <div class="card-title">
                <h4>lorem ispum dolor set</h4>
            </div>
        </div>
    </a>
{% endfor %}

and here's the result on the page:

ps here i have 5 elements in a slick slider with 3 slides to show

I also don't have any errors in the console

Answer 1

In your scss file, try adding this import file...

@import "~slick-carousel/slick/slick";

This core css is the raw slick framework for your carousel to function.

When importing node_modules into your scss file, you can use ~ for shorthand to get vendor css files. And you do not need to include the file extension.

If you want to use slicks default theme styles (arrows, dots, etc) then also include...

@import "~slick-carousel/slick/slick-theme";

I personally never use the slick theme as it's easy to style slick to match your current theme using the init'ed slick classes.