必要なファイルをダウンロードしてくる

公式サイトからとってくる

必要なファイル

slick
├ ajax-loader.gif
├ fonts
├ slick-theme.css
├ slick.css
└ slick.min.js

ファイルを格納

static
├css
　├slick-theme.css
　├slick.css
├js
　├slick.min.js
├ajax-loader.gif

htmlに記述

<link th:href="@{/css/slick.css}" rel="stylesheet">
<link th:href="@{/css/slick-theme.css}" rel="stylesheet">
<link th:href="@{/css/displayRecipe.css}" rel="stylesheet">
<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script th:inline="javascript">
    $(function() {
        $('.slider').slick(); 
    });
</script>

1)cssがjsより先に読み込まれる必要がある
2)javascriptより先に、jsを読み込ませる