jQueryプラグイン[.slick]を使用した画像スライド

Question

・使用ファイル、各Verなど
-rails 5.2.3
-ruby 2.5.1
-haml
-scss
-jQuery
-slick

jQueryプラグインのslickを使用して画像のスライドができるページの作成をしています。

メイン画像とサムネイル画像があり、サムネイル画像にマウスを当てると、
当たったサムネイル画像にメイン画像が表示されるというものです。

今回は、メインの各イメージ画像をそのままスライドを切り替えるページング部分（サムネイル画像の部分）
に使用しようとしています。

下記のようにコードを書いているのですが、メイン画像のurlがうまくサムネイル画像に反映されず、
検証で見てみても、src="undefined"となってしまっております。

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

上記ですが、メインスライドにある画像のパスをそれぞれ取得し、それを使って新たなimg要素を作成してページング部分にそれぞれ適用することを想定したコードになります。
6行目のreturnの部分はhamlでの書き方がわからず試行錯誤中です。

  .section__main__box__owl-carousel__stage__outer__active__item-inner{ id: 'main' }
    - @images.each do |image|
      =image_tag image.text, alt: "商品画像", class: "owl-lazy"

初歩的な質問で恐縮ですが、どなたかご教示頂けますと幸いです。

よろしくお願いいたします。

<div class="section__main__box__owl-carousel__stage__outer__active__item-inner slick-initialized slick-slider slick-dotted" id="main">
　<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button>
　　<div class="slick-list draggable">
　　　<div class="slick-track" style="opacity: 1; width: 3900px; transform: translate3d(-300px, 0px, 0px);">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-current slick-active" src="/assets/m38749583053_1-3e664765be0f236ce7a0556c4fd0cbfb95c16f09600b79a31b9abe594e2c5907.jpg" data-slick-index="0" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/m38749583053_2-ece2cb02ca71f2cbc180f8499829657c934f2d4ff88060d97e28c5d59343ab4e.jpg" data-slick-index="1" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/m38749583053_3-39d844b56bcd541c8e0cff0bbe0e6efa6d9b761269f0c7be15d4992ed6994b59.jpg" data-slick-index="2" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control02" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/pan1-9beea85cbc9684ebe13b8caf3c820a0c5735982ce228ddafaffeaaf4bf7e2343.jpg" data-slick-index="3" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide03" aria-describedby="slick-slide-control03" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="4" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide04" aria-describedby="slick-slide-control04" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="5" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide05" aria-describedby="slick-slide-control05" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/m38749583053_1-3e664765be0f236ce7a0556c4fd0cbfb95c16f09600b79a31b9abe594e2c5907.jpg" data-slick-index="6" aria-hidden="true" tabindex="-1" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/m38749583053_2-ece2cb02ca71f2cbc180f8499829657c934f2d4ff88060d97e28c5d59343ab4e.jpg" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/m38749583053_3-39d844b56bcd541c8e0cff0bbe0e6efa6d9b761269f0c7be15d4992ed6994b59.jpg" data-slick-index="8" aria-hidden="true" tabindex="-1" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan1-9beea85cbc9684ebe13b8caf3c820a0c5735982ce228ddafaffeaaf4bf7e2343.jpg" data-slick-index="9" aria-hidden="true" tabindex="-1" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="10" aria-hidden="true" tabindex="-1" style="width: 305px;">
　　　　<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="11" aria-hidden="true" tabindex="-1" style="width: 305px;">
　　　</div>
　　</div>


　<button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button>
　　<ul class="slick-dots" style="display: block;" role="tablist">
　　　　<li class="slick-active" role="presentation">
　　　　　<img src="undefined"></li>
　　　　<li role="presentation">
　　　　　<img src="undefined"></li>
　　　　<li role="presentation">
　　　　　<img src="undefined"></li>
　　　　<li role="presentation">
　　　　　<img src="undefined"></li>
　　　　<li role="presentation">
　　　　　<img src="undefined"></li>
　　　　<li role="presentation">
　　　　　<img src="undefined"></li>
　　　</ul>
</div>

Comments

[m.ts10806]

ブラウザに出力されたHTMLをそのままご提示いただけますか？
おそらくご提示の情報だけだと再現確認が難しいので・・

[kpg]

mts10806 様
ご返信ありがとうございます。
src="undefined"となっているところでよろしかったでしょうか？
下記のようになっております。

<li class="slick-active" role="presentation">
<img src="undefined">

ご確認のほどおねがいたします。

[m.ts10806]

いえ、全部です。slickを適用させている#mainも含めて全てです。

[m.ts10806]

要は、[ $(slider.$slides[i]).find('img').attr('src'); ] では想定の情報が取れていないということなので、「じゃあどういう階層になっていて取れていないのか」を検証する必要があります。

[kpg]

mts10806 様

ご返信ありがとうございます。

下記に記載させて頂きます。
こちらでよろしかったでしょうか。

```
<div class="section__main__box__owl-carousel__stage__outer__active__item-inner slick-initialized slick-slider slick-dotted" id="main">
<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 3900px; transform: translate3d(-300px, 0px, 0px);">
<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide slick-current slick-active" src="/assets/m38749583053_1-3e664765be0f236ce7a0556c4fd0cbfb95c16f09600b79a31b9abe594e2c5907.jpg" data-slick-index="0" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide00" aria-describedby="slick-slide-control00" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/m38749583053_2-ece2cb02ca71f2cbc180f8499829657c934f2d4ff88060d97e28c5d59343ab4e.jpg" data-slick-index="1" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/m38749583053_3-39d844b56bcd541c8e0cff0bbe0e6efa6d9b761269f0c7be15d4992ed6994b59.jpg" data-slick-index="2" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control02" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/pan1-9beea85cbc9684ebe13b8caf3c820a0c5735982ce228ddafaffeaaf4bf7e2343.jpg" data-slick-index="3" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide03" aria-describedby="slick-slide-control03" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="4" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide04" aria-describedby="slick-slide-control04" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="5" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide05" aria-describedby="slick-slide-control05" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/m38749583053_1-3e664765be0f236ce7a0556c4fd0cbfb95c16f09600b79a31b9abe594e2c5907.jpg" data-slick-index="6" aria-hidden="true" tabindex="-1" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/m38749583053_2-ece2cb02ca71f2cbc180f8499829657c934f2d4ff88060d97e28c5d59343ab4e.jpg" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/m38749583053_3-39d844b56bcd541c8e0cff0bbe0e6efa6d9b761269f0c7be15d4992ed6994b59.jpg" data-slick-index="8" aria-hidden="true" tabindex="-1" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan1-9beea85cbc9684ebe13b8caf3c820a0c5735982ce228ddafaffeaaf4bf7e2343.jpg" data-slick-index="9" aria-hidden="true" tabindex="-1" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="10" aria-hidden="true" tabindex="-1" style="width: 305px;">
<img alt="商品画像" class="owl-lazy slick-slide slick-cloned" src="/assets/pan2-6c89db0abe0502038d4bc125f5b0a61f32fa94b9ddec7cc06db32b426804b3e6.jpg" data-slick-index="11" aria-hidden="true" tabindex="-1" style="width: 305px;"></div></div>

<!-- ↑商品のメイン画像 -->

<button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button>
<ul class="slick-dots" style="display: block;" role="tablist">
<li class="slick-active" role="presentation"><img src="undefined"></li>
<li role="presentation" class=""><img src="undefined"></li>
<li role="presentation"><img src="undefined"></li>
<li role="presentation"><img src="undefined"></li>
<li role="presentation"><img src="undefined"></li>
<li role="presentation" class=""><img src="undefined"></li>
</ul></div>
```

[m.ts10806]

お手数かけて申し訳ないですが、コメント欄ではマークダウンは使えませんので、質問本文に「実際に出力したHTMLです」と一言添えてご提示いただけますでしょうか？
今下の方は全てundefinedになっていますが、これは当該JavaScriptを実行された結果ということですね？
実際は「商品のメイン画像」のsrcを取ってきたいということでよろしいでしょうか

[kpg]

大変失礼しました。
元の質問本文の末尾に追記致しました。
「商品のメイン画像」のsrcを取りたいです。
ご確認のほどお願い致します。