slickをCDNで使う方法【お手軽】

slickのファイルをCDNで読み込む

slickを使用するために必要なファイルは、CDN で読み込むことができます

以下で jsDelivr と Cloudflare ( cdnjs ) の2つのCDNを紹介します。

memo
2021年6月時点での最新のバージョン( jQuery3.6.0, slick1.8.1 )を掲載しています

slickをjsDelivrのCDNで使う

jsDelivr の CDN です。slickの公式サイトでも jsDelivr の CDN が紹介されています。

CSS

head 区間に下記を記述します。

<!-- slickのCSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">

JavaScript

</body> の直上に下記を記述します。すでに他の箇所で jQuery を読み込んでいる場合は、slick の JavaScript のみで大丈夫です。

<!-- jQuery -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<!-- slickのJavaScript -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

slickをCloudflare(cdnjs)のCDNで使う

Cloudflare が運営する cdnjs の CDN です。

CSS

<!-- slickのCSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">

JavaScript

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- slickのJavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>