商品画像一覧のスライドショー表示方法について

Question

https://shop.marianaocean.com/?pid=128521636
現在弊社のこういった商品詳細ページにおいて、
次の画像をスライドする際に小さい●を押して表示させているのですが、
下に小さいサムネイルを表示させることは可能ですか？

http://aribsd.sakura.ne.jp/info/24/im-sample24.html
こういった形に表示をさせたいです。

上記ページを参考に、

  $(window).load(function() {
	$(‘.imagelist’).slick({
		animation: “slide”,
		controlNav: “thumbnails”
	});
});
こちらのスクリプトを組み込んだのですが、
うまく動作しません。

よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

> 次の画像をスライドする際に小さい●を押して表示させている

ということは、スマートフォン用ページに関するお話ですね。
スマートフォン用ページの商品画像用スライダーは、

$(function(){
  $('.imagelist').slick({
    dots: true, //点を消したい場合は、「true」を「false」に変更してください。
    infinite: false,
    speed: 300,
    arrows: true,
    slidesToShow: 1,
    adaptiveHeight: true
  });
});

上記タグですでに動作設定が行われておりますので、
この中に動作設定を加えていただくことをオススメします。
一番外側の $(function(){ と }); が「ページ読み込み完了直後に動作する」という意味ですので、
});の直前に加えていただく形になります。

商品画像に使われているslick.jsでサムネイルを実現する方法は、
https://stand-4u.com/javascript/slick.html
上記URLの「サムネイル付きスライダーにする方法」をご参照ください。

なお、いただいたコードにて
" を書くべき箇所で “ や ” が記載されており、
このままですとエラーで停止してしまいますので、
コードを編集される際は必ず " をご記載いただきますようお願いします。

Macをご利用の場合、自動で変換されている可能性がありますので、
不要であれば変換設定を無効にしていただくことをオススメします。
https://blog.piyo.tech/posts/2014-01-06-205101/
http://d.hatena.ne.jp/nakamura001/20140506/1399363317