カラーミーで使っているslickの機能と使い方を解説します

おすすめのスライドショーはどれですか? と訊かれることがあります。
万能系で3D風の変わり種もあるSwiperも良いんですが、カラーミーショップへの設置しやすさでは「slick」かなと思います。

slickもオーソドックスなスライドショー機能は一通りそろっています。
使っている人も多いので、検索すると探している情報が大体見つかります。
すこし慣れている方でしたら設置も難しくありません。

slickの機能について

slickはjQueryプラグインです。
レスポンシブやタッチ操作に対応しています。
利用するにあたり、jQueryの読み込みが必要です。

slick公式サイトにスライドショーの基本的な15例が載っています。
検索すると他にも作例がみつかります。

slick - the last carousel you'll ever need

カラーミーショップに実装する

カラーミーショップにもスライショーを設置できる機能が備わっていて、独自タグを書くと、スライドショーが設置できます。bxSliderというjQueryプラグインを利用しています。

bxSliderと比較すると、slickの方がスライド読み込み時の崩れが少ないです。
使い勝手もよいと思います。

slickのプラグインファイルはCDN(content delivery network)に上げてくれていますので、サーバーは不要です。cdnjsやjsDelivrで探すと見つかります。

また、カラーミーショップのスマートフォンサイトでも使われていますので、カラーミーショップ上にもアップロードされています。
古いバージョン(1.5.0)のため不具合がいくつかあるようです。挙動がおかしい場合は、CDNのファイルを使って新しいバージョンで動作確認します。

<!-- slick -->
<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.css">
<link rel="stylesheet" href="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick-theme.css">
<script src="https://img.shop-pro.jp/s_tmpl_js/28/slick/slick.min.js"></script>

プラグインファイルを読み込んだら、スライドショー画像の用意と、プラグインの実行用コードを書きます。

独自タグ<{$slideshow_html}>を使えば、管理画面のショップ作成>デザイン>スライドショーで登録した画像を表示できます。

トップページにスライドショーを表示する例

<!-- スライドショー -->
<{if $tpl_name == "top"}>
  <div class="top-slideshow">
  <{if $slideshow_html}>
    <{$slideshow_html}>
    <script>
    $(function() {
      //スライドショー(slick)のパラメータ
      $('#slider').slick({
        arrows: false,
        autoplay: true,
        autoplaySpeed:5000,
        dots:true,
        slidesToShow: 1,
        slidesToScroll: 1,
      });
    });
    </script>
  <{/if}>
  </div>
<{/if}>
<!-- //スライドショー -->

slickパラメータのサンプル

slcikパラメータは以下の間に書きます。
パラメータを変更すれば挙動などを変更できます。

,(コンマ)はパラメータの最後の行末につけないのが正式な書式です(下例だと、dots: trueとするのが正式)。
slickパラメータはコンマをつけていても動作しますし、追加・削除時にうっかりエラーが減るので、サンプルでは全部につけています。

参考)slickドキュメント翻訳 | slick - にほんご。

一枚のスライドショー

主にトップページのスライドショーに使います。

$('#slider').slick({
  arrows: false,
  autoplay: true,
  autoplaySpeed: 2000,
  dots: true,
});

メイン画像+サムネイル画像

商品詳細ページで使います。メイン画像(スライドショー)とサムネイル画像が連動します。
slickはスマートフォン閲覧時にタッチ操作で画像送りができて、使いやすさが向上します。

$('.slick-class').slick({
  arrows: false,
  dots:true,
  customPaging: function(slick,index) {
    var targetImage = slick.$slides.eq(index).find('img').attr('src');
                      return '<img src=" ' + targetImage + ' "/>';
    }
  });
});

メイン画像+カルーセル

商品詳細ページで使います。サムネイル画像がコンパクトなので、画面が狭いデバイス向けの省スペースなタイプです。

スライド画像にmain-image・thumbクラスを指定します。適当にCSSを入れて整えてください。
サムネイル画像の左右に余白を入れると画像サイズの計算が若干おかしくなります。

asNavForがメイン画像とサムネイル画像の連動を設定しています。
initはslick標準装備のイベント(後述)。

$('.main-image').on('init', function(event, slick) {
  if(slick.slideCount <= 6) {
    $('.product-image-sub').css('padding-left','0');
    $('.product-image-sub').css('padding-right','0');
  }
})
.slick({
  arrows: false,
  asNavFor: '.thumb',
  slidesToShow: 1,
});
$('.thumb').slick({
  prevArrow: '<svg class="slick-prev" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>',
  nextArrow: '<svg class="slick-next" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',
  asNavFor: '.main-image',
  arrows: true,
  slidesToShow: 6,
  slidesToScroll: 1,
  focusOnSelect: true,
});

カルーセル、レスポンシブ

トップページで使います。ブランドや商品を表示するのに使えます。
slidesToShowパラメータでカルーセルスライダーになります。
slidesToShow: 2.5, のように端数も入れられます(端数の画像があるとスクロールしそうだと示唆できます)。

responsiveパラメータでブレイクポイントを設定して、スライド表示数などのパラメータを変更します。

$('.slick-class').slick({
  autoplay:true,
  autoplaySpeed:2000,
  slidesToShow: 5,
  slidesToScroll: 1,
  swipeToSlide: true,
  responsive: [
    {
      breakpoint: 768, //767px以下のサイズに適用
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      }
    }
  ]
});

矢印画像

prevArrow・nextArrowパラメ―タでHTMLを追加できます。
下例ではSVG画像を使っていますが、imgタグで入れることもできます。
このパラメータを使わずに疑似要素でアイコンフォントを入れる方法もあります(場合によってはこちらの方がかんたん)。

$('.slick-class').slick({
  prevArrow: '<svg class="slick-prev" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>',
  nextArrow: '<svg class="slick-next" xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',
});

グリッドスライド

グリッド形式(下例は5×2)にできます。もちろんスライドもします。
margin、paddingで横に余白をあけると計算がバグるらしく、画像をくっつけて表示させます。

$('.slick-class').slick({
  arrows: false,
  rows: 2,
  slidesPerRow: 5,
});

垂直モード

サイドバーでバナーを垂直カルーセルにしているサイトがたまにあります。

vertical: true,

高さを調整する

スライド画像全部の高さが揃っていない場合に、下例のように高さが低いスライド画像を閲覧時に余白ができます。
スライド画像の高さに合わせて余白をなくすことも可能です。

adaptiveHeight: true,

ドット丸を四角に変更する

修正箇所はCSSで、このあたりです。

.slick-dots li button::beforeのcontent: '●';を削除して、
.slick-dots li に背景色などを入れる。

slickのイベントとメソッド例

メイン画像+カルーセルで登場した init はイベントと呼ばれ、スライドの初期化時(ページ読み込み直後)に実行されます。
その他スライド移動時、スワイプ時などのさまざまなイベントをキャッチして、何か実行したい場合に使います。

メソッドはslickを操作する機能です。
jQuery内で実行でき、他のコードのなかで使い、slickのイベントや、jQueryのイベントをきっかけにして実行することが多いです。

unslick…slickを破棄する
slickAdd…スライド画像を追加する
ほかにもたくさんあります。

$('.slick-class').slick('unslick');

既知の不具合

slickパラメータで fade: false(またはデフォルトの設定時)の場合、条件によってスライドの端にスジが出ることがあります。
目立つ場合もありまので、その場合はfade: true; にして使うことを検討します。

執筆者

えいじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら