How to Add Slick Slider in Magento 2

I don't know what to do with the Slick directory

As per Magento best practices, you should put this slider folder under skin directory. However puting this under lib folder is also fine and will work. But I recommend skin directory.

So put your css js files in skin\frontend\[package]\[theme]\slick_slider\*

How can I apply those Js and Css into my module

Next step is to define layout update xml file inside your module. For this add this snippet inside your module's config.xml file.

<config>
    <frontend>
        <layout>
            <updates>
                <{namespace_module}>
                    <file>{namespace_module}.xml</file>
                </{namespace_module}>
            </updates>
        </layout>
    </frontend>
</config>

Now use your this file to add slider specific files (css and js) to head section

File : app\design\frontend\[package]\[theme]\layout\{namespace_module.xml}

<layout>
    <{layout_update_handle_you_need}>
        <reference name="head">
            <action method="addItem">
                <type>skin_css</type>
                <item>slick_slider/slick.css</item>
            </action>
            <action method="addItem">
                <type>skin_css</type>
                <item>slick_slider/slick-theme.css</item>
            </action>
            <!-- add jquery if not present -->
            <action method="addItem">
                <type>skin_js</type>
                <item>slick_slider/slick.min.js.css</item>
            </action>
        </reference>
    </{layout_update_handle_you_need}>
</layout>

Now put html and script specific for the slider in any one of the template file of your module.

Hope that helps

That's due to calling init twice This works without error:

$(".slickslider").not('.slick-initialized').slick()