JavaScript

「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方

スポンサードリンク
スポンサードリンク


案件でスライドを実装しないといけなくなり、Slider Proで対応しようとしたのですが、

「1枚の画像のときにスライダーを表示させないでくれ」と言われてしまい
1枚の画像のケースがありえるの?とツッコミしたくなりました。

スライダーを使うのだから複数枚画像は用意するでしょう!というのは
製作者側の勝手な意見なのでしょうかねえ。

さて、Slider Proを見直したところ、矢印部分や背景にCSSで編集を加えていたため
1枚画像の場合に矢印が表示されてしまう事態となってスライダーをSlickへ変更しました。

slick ライセンス

MITライセンス/個人無料・商用無料
slickはjQueryを利用します。

slick デモサンプルURL/公式ドキュメント

スポンサードリンク

slickのサムネイルスクロール幅で泥沼にハマる

slickはオプション値やスライダー実装例が多くあるので幅広い対応が可能です。

1点ハマったところがあり、メイン画像とサムネイルを連携表示させているときに
スクロール幅をオプションで調整できないことでした。

スクロール幅を調整できないと、2枚しかスライド画像がないときに
サムネイルがどんどん遠ざかっていく由々しき事態になります。

slick サムネイルは固定してメイン画像はスライドさせる実践的使用法

どうしたものかと悩んだ挙げ句に解決方法が見つかりました。

スライダーのページング用ドットをサムネイルとして置き換えるやり方です。

ページング用ドットならサムネイルを固定したまま
スライダー画像を動かせます。

ドット表示オプション値をtrueにし、
customPagingのオプションでスライダーに使っている画像のURLを
ドットの場所へ置き換えます。

あとはドットを配置しているslick.css,slick-theme.cssを調整します。



$(function() {
  $('#slick').slick({
    dots: true,
    customPaging: function(slider, i) {
      var thumbSrc = $(slider.$slides[i]).find('img').attr('src');
      return '';
    }
  });
});

See the Pen
slick.js sample
by miccyome (@miccyome)
on CodePen.

ソース参照URL

slickのページングにjQueryを使ってイメージを設定する方法 | NxWorld

WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-JavaScript
-, ,

© 2021 さくらいらぼWEB版 /個人ブログ