・使用ファイル、各Verなど
-rails 5.2.3
-ruby 2.5.1
-haml
-scss
-jQuery
-slick
jQueryプラグインのslickを使用して画像のスライドができるページの作成をしています。
メイン画像とサムネイル画像があり、サムネイル画像にマウスを当てると、
当たったサムネイル画像にメイン画像が表示されるというものです。
今回は、メインの各イメージ画像をそのままスライドを切り替えるページング部分(サムネイル画像の部分)
に使用しようとしています。
下記のようにコードを書いているのですが、メイン画像のurlがうまくサムネイル画像に反映されず、
検証で見てみても、src="undefined"となってしまっております。
jQuery
1$(function(){ 2 $('#main').slick({ 3 dots: true, 4 customPaging: function(slider, i) { 5 var thumbSrc = $(slider.$slides[i]).find('img').attr('src'); 6 return '<img src="' + thumbSrc + '">'; } 7 }); 8});
上記ですが、メインスライドにある画像のパスをそれぞれ取得し、それを使って新たなimg要素を作成してページング部分にそれぞれ適用することを想定したコードになります。
6行目のreturnの部分はhamlでの書き方がわからず試行錯誤中です。
haml
1 .section__main__box__owl-carousel__stage__outer__active__item-inner{ id: 'main' } 2 - @images.each do |image| 3 =image_tag image.text, alt: "商品画像", class: "owl-lazy"
初歩的な質問で恐縮ですが、どなたかご教示頂けますと幸いです。
よろしくお願いいたします。
html
1<div class="section__main__box__owl-carousel__stage__outer__active__item-inner slick-initialized slick-slider slick-dotted" id="main"> 2 <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: block;">Previous</button> 3 <div class="slick-list draggable"> 4 <div class="slick-track" style="opacity: 1; width: 3900px; transform: translate3d(-300px, 0px, 0px);"> 5 <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;"> 6 <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;"> 7 <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;"> 8 <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;"> 9 <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;"> 10 <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;"> 11 <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;"> 12 <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;"> 13 <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;"> 14 <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;"> 15 <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;"> 16 <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;"> 17 <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;"> 18 </div> 19 </div> 20 21 22 <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block;">Next</button> 23 <ul class="slick-dots" style="display: block;" role="tablist"> 24 <li class="slick-active" role="presentation"> 25 <img src="undefined"></li> 26 <li role="presentation"> 27 <img src="undefined"></li> 28 <li role="presentation"> 29 <img src="undefined"></li> 30 <li role="presentation"> 31 <img src="undefined"></li> 32 <li role="presentation"> 33 <img src="undefined"></li> 34 <li role="presentation"> 35 <img src="undefined"></li> 36 </ul> 37</div>
あなたの回答
tips
プレビュー