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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

875閲覧

slickスライドの移動について

kitikiti

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

1クリップ

投稿2018/07/24 00:49

メインビジュアルが10枚あり、サムネイルの数が3つの項目でサムネイルの部分のテキストをクリックすると、メイン画像の指定した場所にスライド移動する仕組みを作成したいのですが、機能しませんでした。
サムネイルの画像とメイン画像の枚数が同じでないとできないのでしょうか。
同じような仕組みでご存知の方、javascript得意な方見ていただけませんでしょうか?

html

1サムネイル画像 2<ul class="plan_list"> 3 <li>test1</li> //画像1のビジュアルにスライドする 4 <li>test2</li> //画像5のビジュアルにスライドする 5 <li>test3</li>//画像8のビジュアルにスライドする 6</ul> 7 8メイン画像 9<ul class="selector"> 10 <li>画像1</li>//test1をクリックしたときの移動先 11 <li>画像2</li> 12 <li>画像3</li> 13 <li>画像4</li> 14 <li>画像5</li>//test2をクリックしたときの移動先 15 <li>画像6</li> 16 <li>画像7</li> 17 <li>画像8</li>//test3をクリックしたときの移動先 18 <li>画像9</li> 19 <li>画像10</li> 20</ul>

js

1 2 3 $(".selector").slick({ 4 autoplay: true, 5 cssEase: 'ease', 6 slidesToShow: 3, 7 slidesToScroll: 1, 8 infinite: true, 9 draggable: true, 10 arrows:true, 11 focusonSelect:true, 12 asNavFor: '.plan_list', //サムネイルのクラス名 13 responsive: [ 14 { 15 breakpoint: 768, 16 settings: { 17 slidesToShow: 1, 18 slidesToScroll: 1, 19 arrows:true, 20 } 21 } 22 ] 23 24 25 }); 26 $('.plan_list').slick({ 27 infinite: true, 28 slidesToShow: 3, 29 slidesToScroll: 3, 30 asNavFor: '.selector', //スライダー本体のクラス名 31 focusOnSelect: true, 32 }); 33 /*

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

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

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

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

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

m.ts10806

2018/07/24 00:57 編集

「機能しない」というのは何が起きたのでしょうか。ブラウザ開発ツールコンソールにエラーなど出ていませんか?具体的に記載してください。
guest

回答1

0

ベストアンサー

Slickのサムネイルと同期するやり方では無理ですので
サムネイルは別で考えて1番目のサムネイルがクリックされた時○枚目のスライドに移動する処理は自分で書きます。
スライドを指定位置に移動させるのは以下のようにします。

$('.selector').slick('slickCurrentSlide', 3);

公式サイト

投稿2018/07/24 04:05

keisukeh

総合スコア657

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

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

kitikiti

2018/07/24 04:47

ご回答ありがとうございます。 そのままコピペをしましたが、画面には何も出てきませんでした。 他に何らかの追加をしないと無理なのでしょうか。
keisukeh

2018/07/24 05:23

上記コードをサムネイルがクリックされた時の処理の部分に書いてますか?
keisukeh

2018/07/24 05:26 編集

すいません。イベント名間違えてました。 $('.selector').slick('slickGoTo', 3);
kitikiti

2018/07/24 05:28

ご回答ありがとうございます。 サムネイルのコード部分は残したままで、メインスライドの部分に上記のコードを追加すればいいでしょうか。
keisukeh

2018/07/24 05:33

サムネイルに対してslickを実行しているところは必要ありません。 サムネイルがクリックされたときに $('.selector').slick('slickGoTo', 表示したいメインスライドの番号); を実行してください。 何かがクリックされたときに何かをしたいというコードがわからない場合はこのあたりを参考にしてみてください。 https://www.sejuku.net/blog/41978
kitikiti

2018/07/24 14:29

ご協力ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問