質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

4544閲覧

モーダルウィンドウ内にslickを使ってスライドショーを実装したい

kzy27

総合スコア0

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

モーダルダイアログ

モーダルダイアログとは、ユーザーに重要な情報を表示するときに用いられる視覚的なダイアログのことを指します。これらのダイアログは他のすべてのコンテンツの上に表示され、ユーザーの入力を受けるまでアプリケーションフローは停止されます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/03/21 10:05

編集2022/03/23 09:42

<実現したいこと>

モーダルウィンドウ内でslickを使ってスライドショーを実装したいです。
具体的には、
画像をクリックしたら同じ画像がモーダルウィンドウ内でスライド画像の最初として出てくる
・モーダルウィンドウ内では左右の矢印をクリックして画像のスライドをさせる
イメージ説明

<現状できていること>

・モーダルウィンドウの実装
・左右矢印をクリックしたら画像がスライドする

<発生している問題>

「画像をクリックしたら同じ画像がモーダルウィンドウ内でスライド画像の最初として出てくる」
の実装がうまくいかない状態です。
現状のコードだと、let slideNum = $(this).data('slide');でslideNumに値が入るところまではできているのですが、その後の$('[data-slide="' + slideNum + '"]').click(function() {・・・}が処理されず、スライダーが機能されていない状況です。

<試したこと>

slickのオプション設定でinitialSlideを使うと最初に出てくるスライドを制御できることが分かり、直接initialSlideの値を設定すると実現できました。
この値をslideNumという変数によってクリックした画像が最初に出てくるようにしたいが上手くいかず。。
各画像にdata-slideというカスタムデータ属性を設定して、その値によってslideNumの値を入れ替えて実装できればとやってみたが上手くいかず。。

HTML

1<div class="works-area"> 2 <ul class="gallery"> 3 <li><img src="img/works_1.jpg" alt="" class="modal-open" data-slide="1"></li> 4 <li><img src="img/works_2.jpg" alt="" class="modal-open" data-slide="2"></li> 5 <li><img src="img/works_3.jpg" alt="" class="modal-open" data-slide="3"></li> 6 <li><img src="img/works_4.jpg" alt="" class="modal-open" data-slide="4"></li> 7 </ul> 8</div> 9 10<!-- モーダルウィンドウ --> 11<div class="modal-container"> 12 <div class="modal-body"> 13 <!-- 閉じるボタン --> 14 <div class="modal-close">×</div> 15 <!-- モーダル内のコンテンツ --> 16 <div class="modal-content"> 17 <ul class="slider"> 18 <li> 19 <a href="" target="_blank"><img src="img/works_1.jpg" alt=""></a> 20 <div class="modal-content-text"> 21 <h3><a href="#">タイトル</a></h3> 22 <p>ダミーテキスト</p> 23 </div> 24 </li> 25 <li> 26 <a href="" target="_blank"><img src="img/works_2.jpg" alt=""></a> 27 <div class="modal-content-text"> 28 <h3><a href="" target="_blank">タイトル</a></h3> 29 <p>ダミーテキスト</p> 30 </div> 31 </li> 32 <li> 33 <a href="" target="_blank"><img src="img/works_3.jpg" alt=""></a> 34 <div class="modal-content-text"> 35 <h3><a href="" target="_blank">タイトル</a></h3> 36 <p>ダミーテキスト</p> 37 </div> 38 </li> 39 <li> 40 <a href="" target="_blank"><img src="img/works_4.jpg" alt=""></a> 41 <div class="modal-content-text"> 42 <h3><a href="" target="_blank">タイトル</a></h3> 43 <p>ダミーテキスト</p> 44 </div> 45 </ul> 46 </div> 47 </div> 48</div>

jQuery

1$('.gallery img').click(function() { 2 let slideNum = $(this).data('slide'); 3 4 $('[data-slide="' + slideNum + '"]').click(function() { 5 $('.slider').slick({ 6 fade: true, 7 speed: 1000, 8 infinite: true, 9 slidesToShow: 1, 10 slidesToScroll: 1, 11 arrows: true, 12 prevArrow: '<div class="slick-prev"><span></span></div>', 13 nextArrow: '<div class="slick-next"><span></span></div>', 14 dots: false, 15 initialSlide: slideNum - 1, 16 }); 17 }); 18});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

initialSlide: slideNum - 1,とすればいいかと思います。

投稿2022/03/22 05:11

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kzy27

2022/03/22 14:40

ご回答ありがとうございます。 自分の書き方が悪くすみません。 initialSlide: slideNum - 1,のインデックスのズレは単なる表記ミスでした。。 問題となっているのがjQueryのところでして、現状のコードだと、let slideNum = $(this).data('slide');でslideNumに値が入るところまではできているのですが、その後の$('[data-slide="' + slideNum + '"]').click(function() {・・・}が処理されず、スライダーが機能されていない状況です。 こちらのコードの書き方や構造も含めてアドバイスございましたらいただけると幸いです。
Lhankor_Mhy

2022/03/23 00:42

ご提示のコードで動作しているようでしたが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問