Include styles with the <Slider> component to avoid unnecessary global styles.

[oalexdoda]

When using the library with Next.js, you can't include the styles at a component level just for the pages / components using the slider. You have to import it globally, causing additional unnecessary CSS.

There should be a parameter for the <Slider> component that includes the default slick.css and slick-theme.css, such as:

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 4,
        styles: true
};

<Slider {...settings}>
     ...
</Slider>

[IvoLondon]

+1, I am also looking for a solution to this

[oalexdoda]

I saw other libraries adding an attribute to the main component, in this case , which passes down class names to sub-components. @akiran

For example:

import styles from './styles.module.scss';
...
<Slider className={ styles.slider } dynamicClasses={{ arrows: styles.arrows, slide: styles.slide, ... }}>
...
</Slider>

[pedroBruno7]

+1 I think the modern way to install a module, the module takes care of installing other dependencies It should be automatically installed and the css should be scoped, like material UI and other libs do, with the possibility to change styles