目次
Slickとは何か
Slickは、高機能で扱いやすいスライダーを簡単に実装できるjQueryプラグインです。
シンプルなコードで、以下のようなスライダーを作成できます。
- 画像スライダー
- カード型スライダー
- 自動再生スライダー
- レスポンシブ対応スライダー
多くの実案件やテンプレートでも採用されており、学習コストが低いのが特徴です。
Slickが選ばれる理由
Slickが初心者にもおすすめされる理由は以下です。
- 設定項目がわかりやすい
- レスポンシブ対応が簡単
- スマホ操作（スワイプ）に対応
- カスタマイズ性が高い
HTMLとCSSの知識があれば、比較的スムーズに導入できます。
Slickの導入方法
ファイルを読み込む
まずは必要なファイルを読み込みます。
<!-- Slick CSS -->
<link rel="stylesheet" href="slick.css">
<link rel="stylesheet" href="slick-theme.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Slick JS -->
<script src="slick.min.js"></script>※ jQueryは Slickより先に 読み込む必要があります。
HTMLの基本構造
スライダーのHTML構造はとてもシンプルです。
<div class="slider">
<div><img src="img1.jpg" alt=""></div>
<div><img src="img2.jpg" alt=""></div>
<div><img src="img3.jpg" alt=""></div>
</div>- 1スライド＝1つの子要素
- div以外でも使用可能
- 構造はできるだけシンプルにするのがコツです
Slickの基本初期化
JavaScriptでSlickを有効化します。
<script>
$(function () {
$('.slider').slick();
});
</script>これだけで、基本的なスライダーが完成します。
よく使う基本オプション
Slickには多くのオプションがありますが、まずは定番から押さえましょう。
$('.slider').slick({
autoplay: true,
autoplaySpeed: 3000,
arrows: true,
dots: true,
infinite: true
});- autoplay：自動再生
- arrows：前後矢印
- dots：ドットナビ
- infinite：ループ再生
表示枚数を指定する方法
複数枚を同時に表示したい場合です。
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 1
});商品一覧やカードスライダーでよく使われます。
レスポンシブ対応の設定
画面サイズごとに表示枚数を変えることができます。
$('.slider').slick({
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}
]
});- PC：3枚表示
- スマホ：1枚表示
という切り替えが簡単に行えます。
スライドの余白を調整する
スライド間の余白はCSSで調整します。
.slider .slick-slide {
padding: 0 10px;
}Slick自体に余白オプションはないため、CSSで調整するのが基本です。
矢印・ドットのカスタマイズ
矢印を非表示にする
arrows: falseドットを非表示にする
dots: false矢印デザインを変更する
.slick-prev,
.slick-next {
width: 40px;
height: 40px;
background: #333;
border-radius: 50%;
}実案件では、デザインに合わせてCSS調整するケースがほとんどです。
よくあるトラブルと対処法
スライダーが表示されない
- jQueryが読み込まれていない
- SlickのJSが後に読み込まれていない
- クラス名の指定ミス
レイアウトが崩れる
- 画像サイズが揃っていない
- CSSでwidth指定をしている
- 親要素にoverflow:hiddenがある
横スクロールが出る
- slick-slideの幅計算崩れ
- transform使用時の影響
必要に応じて overflow-x: hidden; を確認しましょう。
Slickを使う際の注意点
Slickは便利ですが、以下の点には注意が必要です。
- jQuery依存である
- 読み込みが少し重くなる
- 使いすぎるとUXが低下する
必要な箇所だけに絞って使うのがベストです。
実務での使いどころ
Slickは次のような場面でよく使われます。
- トップページのメインビジュアル
- 商品一覧の横スクロール
- 実績・レビュー表示
- スマホ用カルーセル
HP Build Studioの制作案件でも、カードスライダー用途での使用頻度が高いプラグインです。
まとめ
Slickを使えば、スライダーは難しくありません。
- HTML構造はシンプルに
- 基本オプションから理解する
- レスポンシブ設定を活用する
- CSSでデザインを整える
まずは基本設定で動かし、必要に応じてカスタマイズしていきましょう。
