Chap18-3.1 カルーセル・スライダー

jQueryプラグイン「slick.js」を使ったカルーセルスライダーです。

カルーセルスライダーは、ページのレイアウトを省スペース化できるデザイン手法の一つです。
複数ある画像を、カード・タイルレイアウトのようにグリッドに沿って一覧で見せるほど数も多くない時や、印象・イメージを伝えるために複数の画像を使う時などに効果的なデザイン手法です。

<li>で囲まれた範囲がスライドするので、商品画像と商品名・価格をカードのようなボックスにデザインし、スライドさせて表示することもできます。

モーダルウィンドウやリンクを組み合わせて、詳細情報へ誘導することもできるので、アイデア次第で複数の画像を効果的に使うことができるでしょう。

slick – the last carousel you'll ever need

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

kenwheeler.github.io

Contents

カルーセル・スライダーのデモ
作成手順

カルーセル・スライダーのデモ

See the Pen 18-3 by Rayout-gw (@Rayout-gw) on CodePen.

デモページで、いろいろアレンジしながら仕組みを理解していきましょう。
必要なタグや、カルーセル表示できるのを確認してから、猫カフェのページなどでも同じようにチャレンジしてみましょう。

作成手順

「carusel-demo」フォルダを作成し「demo.html」を作成

chap18

carusel-demo（フォルダを作成）

demo.html（デモページを作成）

css（フォルダを作成）

slider.css（スライダー用CSSファイルを作成）

images（フォルダを作成）

〜.jpg（画像ファイルをコピーして保存）

画像ファイルは何でもいいですが、できれば横長の画像がいいです

CDNのコードを<title>下に貼り付け

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

オフラインでも表示するには、各ファイルをDLする必要があります。

carusel-demo.zipをDL

スライダーに表示する画像をリストで作成

<ul class="クラス名をつける">
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
</ul>

1行目のクラス名は、使用するスライダーの種類によって変わります

jQueryを記述

</body>の１行上あたりに記述します。

<script>
//ここに使用するスライダーのjqueryコードを貼り付ける
</script>

2行目はjavascriptのコメントアウトです。削除OK。
スライダーの種類によって、貼り付けるコードが違います。

スライダー用のCSSを作成

CSSファイルを作成し、下のコードをコピーして貼り付けます。

/*基本設定*/
.slick-slide {
  height: auto;
}
 
/*矢印ボタンの調整*/
.slick-prev {
  left: 20px;
}
.slick-next {
  right: 20px;
}
 
.slick-prev,
.slick-next {
  z-index: 100;
}
 
.slick-prev::before,
.slick-next::before {
  font-size: 24px;
  color: #000;
}
 
/*ドット（ページネーション）*/
.slick-dots {
  bottom: -40px;
}
 
/*シングルスライダー*/
.single {
  max-width: 800px;
  margin: 0 auto 50px;
  padding: 0;
}
.single img{
  width: 100%;
  height: auto;
}
 
/*フェードスライダー*/
.fade {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  height: auto;
}
.fade img{
  width: 100%;
    }
 
/*マルチスライダー*/
.multiple {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
.multiple img {
  width: 100%;
}
.multiple li {
  margin: 0 5px;
}
.multiple .slick-next {
  right: 20px;
  z-index: 100;
}
.multiple .slick-prev {
  left: 20px;
  z-index: 100;
}
 
/*サムネイル付スライダー*/
.thumbnail {
  max-width: 800px;
  margin: 0 auto 5px;
  padding: 0;
}
.thumbnail img,
.thumbnail-thumb img{
  width: 100%;
}
.thumbnail-thumb {
  max-width: 700px;
  margin: 0 auto;
  padding:0;
}
.thumbnail-thumb li {
  margin: 5px;
}
.thumbnial-thumb .slick-next {
  right: 20px;
  z-index: 100;
}
.thumbnail-thumb .slick-prev {
  left: 15px;
  z-index: 100;
}
.thumbnail-thumb .slick-current {
  opacity: 0.5;
}
.thumbnail-thumb li {
  cursor: pointer;
}
 
/*センタースライダー*/
.center {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}
.center img {
  width: 100%;
  height: auto;
}
.center .slick-next {
  right: 20px;
  z-index: 100;
}
.center .slick-prev {
  left: 20px;
  z-index: 100;
}

HTMLへ<link>するのを忘れないようにしましょう

使用するスライダーの種類を決め、クラス名とjQueryを追加

一般的なスライダー

<ul class="single">

$('.single').slick({
    autoplay: true, //自動再生
  });

フェードで切り替わるスライダー

<ul class="fade">

$('.fade').slick({
  autoplay: true, //自動再生
  dots: true, //ドットのナビゲーションを表示
  infinite: true, //スライドのループ有効化
  speed: 1000, //切り替えのスピード（小さくすると速くなる）
  fade: true, //フェードの有効化
});

複数枚表示するスライダー

<ul class="multiple">

$('.multiple').slick({
  autoplay: true, //自動再生
  infinite: true, //スライドのループ有効化
  dots: true, //ドットのナビゲーションを表示
  slidesToShow: 4, //表示するスライドの数
  slidesToScroll: 4, //スクロールで切り替わるスライドの数
  responsive: [{
    breakpoint: 768, //ブレークポイントが768px
    settings: {
      slidesToShow: 3, //表示するスライドの数
      slidesToScroll: 3, //スクロールで切り替わるスライドの数
    }
  },{
    breakpoint: 480, //ブレークポイントが480px
    settings: {
      slidesToShow: 2, //表示するスライドの数
      slidesToScroll: 2, //スクロールで切り替わるスライドの数
    }
  }]
  });

サムネイル付きスライダー

サムネイル用のリストも追加します。

<ul class="thumbnail">
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
</ul>
<-- サムネイル表示 -->
<ul class="thumbnail-thumb">
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
    <li><img src="images/画像ファイル名" alt="代替文字"></li>
</ul>

$('.thumbnail').slick({
  infinite: true, //スライドのループ有効化
  arrows: false, //矢印非表示
  fade: true, //フェードの有効化
  draggable: false //ドラッグ操作の無効化
});
$('.thumbnail-thumb').slick({
  infinite: true, //スライドのループ有効化
  slidesToShow: 8, //表示するスライドの数
  focusOnSelect: true, //フォーカスの有効化
  asNavFor: '.thumbnail', //thumbnailクラスのナビゲーション
});

左右に前後の画像を表示したスライダー

<ul class="center">

$('.center').slick({
  infinite: true, //スライドのループ有効化
  dots:true, //ドットのナビゲーションを表示
  centerMode: true, //要素を中央寄せ
  centerPadding:'10%', //両サイドの見えている部分のサイズ
  autoplay:true, //自動再生
});