0

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 :

slick slider with 3 slides to show

p.s. here i have 5 elements in a slick slider with 3 slides to show

I also don't have any errors in the console

mychauffage
  • 21
  • 2
  • Have you required the slick css too? Not the theme css just the core css. – joshmoto Dec 08 '20 at 16:07
  • What layout framework you using? Slick columns (multi-items) does not run on flex, slick columns are display block with inline css widths on each slide item for each defined responsive breakpoint. Here is (answer I made for bootstrap 4 slick columns)[https://stackoverflow.com/questions/54258471/bootstrap-4-carousel-with-multi-col-slides/54263516#54263516]. This might get you on the right track as bootstrap 4 columns run on flex too. – joshmoto Dec 08 '20 at 21:24
  • 1
    you were right @joshmoto, thank you, it was an include to slick style that solved the problem, i just don't know if or how i can validate a comment as the solution for this problem, but it was just that, a simple "@import "../../node_modules/slick-carousel/slick/slick.scss";" and "@import "../../node_modules/slick-carousel/slick/slick-theme.scss";" – mychauffage Dec 10 '20 at 14:15

1 Answers1

0

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.

joshmoto
  • 4,472
  • 1
  • 26
  • 45