jQuery「slick」でページングに画像を使用する方法

Question

https://www.nxworld.net/tips/jquery-plugin-slick-image-paging.html
↑のページの「ページングをイメージに変更 #2」を参考に
jQuery「slick」でページングを画像したのですが、
挙動は行われるのですが何故か画像が表示されません。

Chromeの検証で見ると何故かファイル名が「undefined」に変更されてしまいます。
原因・解決方法分かりますでしょうか。

<ul id="slick">
<li><a href="#">
<div data-thumb="images/index/pc_MV001_sub.png"><img src="images/index/pc_MV001.png" alt="MV001"></div>
</a></li>

<li><a href="#">
<div data-thumb="images/index/pc_MV002_sub.png"><img src="images/index/pc_MV002.png" alt="MV002"></div>
</a></li>

<li><a href="#">
<div data-thumb="images/index/pc_MV003_sub.png"><img src="images/index/pc_MV003.png" alt="MV003"></div>
</a></li>

</ul>

<script type="text/javascript">
$(function() {
  $('#slick').slick({
    dots: true,
    customPaging: function(slider, i) {
      var thumbSrc = $(slider.$slides[i]).data('thumb');
      return '<img src="' + thumbSrc + '">';
    }
  });
});
</script>

Comments

[m.ts10806]

$slidesってどこからきたのでしょう

[namatama]

すみません。参照元のサイトからそのままコピペしたものを使用しているので分かりません。
消してしまっても大丈夫なものでしょうか。

[m.ts10806]

それを確認してください。
存在するプロパティなら使えるし、しないなら使えないだけの話です。
プラグイン利用するのでしたら公式のドキュメントも確認してください。
誰かが書いた何かの記事は書いたときの最新であって今最新とは限りませんし、独自の使い方をしている可能性もあります。
JavaScriptをほとんど自分で書けないのであれば使えるようにはならないかと思います。

[namatama]

消してみたところ、画像のファイル名は「undefined」のままでスライドしなくなったので必要な記述だったようです。
どこを修正すればいいのか自分では理解できる段階にないので模索しつつ他の方法を探してみようと思います。
ありがとうございました。

Answer 1

divの代わりにul、liタグを使用している(指定された書き方を守っていない)からじゃないですかね。

Comments

[namatama]

ご回答ありがとうございます。
divに変更してみましたが変化はありませんでした。

[2ckD]

あなたの発言からでは本当に指定通りにかけているのか判断つかないのでアドバイスのしようがないです。
テンプレートに必要なjs、cssファイルが取り込めていない可能性も捨てきれませんし。
全部の可能性を上げるとつかれるので無理です。
htmlを全文貼っておいてほしかったのもあるけど、そもそも人任せ過ぎませんかね(他の人への返答でそう感じました)。