• X アカウント
  • Instagram アカウント
  • Bluesky アカウント
TOP › TECH › JS / jQuery › 【導入編】画像スライダー「slick.js」の使い方

【導入編】画像スライダー「slick.js」の使い方

公開日：
最終更新日：

圧倒的なシェアを誇り、導入ハードルが低くカスタマイズもしやすい定番のjQueryスライダー「slick」。

初心者の方向けの、slickの導入方法についてご紹介します。

slick - the last carousel you'll ever need

kenwheeler.github.io

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints,...

 

事前準備

ソースを自分のサーバへダウンロードしてローカルファイルとして使用する方法と、オンラインにあるソース（CDN）をURLから直接読み込む方法の２通りあります。
いずれの方法にしても、slick.jsの読み込みの前に必ずjQueryを読み込んでください。

ダウンロードして使う

①jQueryとslick.jsをダウンロードする

jQueryのダウンロードはこちら、slick.jsのダウンロードはこちらから。

②ダウンロードしたファイルをそれぞれ読み込む

<!-- jQuery -->
<script src="/※保存したパス/jquery-3.7.1.min.js"></script>

<!-- slick -->
<link rel="stylesheet" type="text/css" href="/※保存したパス/slick.css"/>
<script type="text/javascript" src="/※保存したパス/slick.min.js"></script>

もしデザインのカスタマイズをしない場合や、最低限動けばOK！という方は、同梱されている「slick-theme.css」も読み込んでおきましょう。

<link rel="stylesheet" type="text/css" href="/※保存したパス/slick-theme.css"/>

CDNで使う

①<head>〜</head>内に、以下のソースを貼り付ける。以上！

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- slick -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

もしデザインのカスタマイズをしない場合や、最低限動けばOK！という方は、「slick-theme.css」も読み込んでおきましょう。

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.js"></script>

 

スライダーの作成

①HTMLを用意する

<!-- クラス名は好きなものでOK！ -->
<ul class="slick-slider">
  <li>スライド１</li>
  <li>スライド２</li>
  <li>スライド３</li>
</ul>

<div>タグなどでも動作しますが、管理のしやすさから<ul>タグを使用しています。

②jQueryを書く

$('.slick-slider').slick();

最低限の基本形はこれだけです。
slickのテーマCSSを導入していれば、この１行だけでもスライダーとして動きます。

こちらは、オプションなし、slick-theme.cssを読み込んだだけの一番シンプルな形です。
CSSで微調整はしていますが、これだけでも十分スライダーとして機能しているのがわかります。

See the Pen
slick-sample_01 by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.

③オプションを追加する

slickには多くのオプションが用意されています。
オプション機能を追加するためには、②の基本形を以下のようにします。

$('.slick-slider').slick({
  /* ここにオプションを追加していきます！ */
});

オプションを追加していくとこんな感じになります。

$('.slick-slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

「オプション名 : 値」を、カンマで区切っていきます。

 

準備完了！

これでslickの導入は完了です。クラス名も自由に設定できますし、シンプルでとても導入しやすいですね！

次は応用編として、オプション機能をまとめていきたいと思います。

© piconotes.