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

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

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

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

Q&A

解決済

1回答

1003閲覧

【jQuery】スライダープラグインslickでのdotsの挙動について

yukabyo

総合スコア135

jQuery

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

0グッド

0クリップ

投稿2018/03/27 04:13

編集2018/03/27 05:37

slickを使用して、スライダーを設置しました。
https://github.com/kenwheeler/slick/
slick.min.jsと、slick.cssを読み込んでいます。

下記のように記述して、スライドは動いています。
dots:trueにしているので、ドットが表示され、ドットをクリックすると画像が切り替わるのですが、
ここのドットを、クリックではなく、マウスオーバーで画像が切り替わるような動きにしたいです。

オプションを見たのですが、そのような機能がなかったため、どのようにしたらいいのかわかりません。
どなたか教えていただけないでしょうか?
よろしくお願いいたします。

php

1 <ul class="top_mainimage_slide"> 2 <li>スライドの内容1</li> 3 <li>スライドの内容2</li> 4 <li>スライドの内容3</li> 5 <li>スライドの内容4</li> 6 </ul>

javascript

1 <!-- ### slick ### --> 2 <script type="text/javascript" src="/js/slick.min.js"></script> 3 <script> 4 //メインイメージスライダー 5 $(document).ready(function(){ 6 $('.top_mainimage_slide').slick({ 7 arrows: false, 8 infinite: false, 9 pauseOnHover: true, 10 dots: true, 11 swipe: false, 12 dotsClass: 'slide-dots', 13 fade: true, 14 }); 15 }); 16$( '.top_mainimage_slide' ).on( 'mouseenter', '.slide-dots > li button', function() { 17 $( this ).click(); 18} ); 19 </script> 20

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

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

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

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

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

m.ts10806

2018/03/27 04:24

クリックでの動作もさせたいのでしょうか、マウスオーバーだけでしょうか
yukabyo

2018/03/27 04:55

ご質問ありがとうございます。マウスオーバーだけで構いません。
guest

回答1

0

ベストアンサー

こんな感じでどうでしょう。

JavaScript

1$( '.autoplay' ).on( 'mouseenter', '.slick-dots > li', function() { 2 $( this ).click(); 3} );

【【jQuery】onメソッドの使用方法 - Qiita】
https://qiita.com/katsunory/items/7b50d399329767a893e1

【jQueryの.hover()メソッドを.on()で使うためには? | THE HAM MEDIA BLOG】
http://h2ham.seesaa.net/article/242553044.html

投稿2018/03/27 04:31

kei344

総合スコア69364

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

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

yukabyo

2018/03/27 04:57

ご回答ありがとうございます。 リンクも付けていただき、ありがとうございます。読んでみます。 こちらを入れてみて、動かなかったのですが、 $( '.autoplay' )というところは、どこからきているのでしょうか? なにか該当するclass名に変えたほうがいいのでしょうか?
yukabyo

2018/03/27 04:59

$( '.top_mainimage_slide' )にしてみたのですが動かなかったです。
kei344

2018/03/27 04:59

$( '.top_mainimage_slide' ) ↑これの間違いです。質問文からコピーしたつもりがslickのページからコピーしていました。
kei344

2018/03/27 05:01

修正したコードを質問文に「追記」していただけませんか?(決して元のコードを消さないでください)
yukabyo

2018/03/27 05:03

コメント入れ違いになってしまい、申し訳ありません。 追記しました。
kei344

2018/03/27 05:08

'.slick-dots > li' を '.slide-dots > li' に変更してください。標準のまま変えていないと思い込んでいました。
yukabyo

2018/03/27 05:12

私も自分で変えていたことに忘れていて、、申し訳ありません。 変えたら動きました!本当にいつもありがとうございます。
x_x

2018/03/27 05:21

autoplayやslick-dotsがない(質問者が'slide-dots'に変えている)ので、動かないと思いますが
x_x

2018/03/27 05:22

って、検証してる間にコメントいっぱい……
yukabyo

2018/03/27 05:24

x_x様、 私がclass名をいろいろ変えていてややこしくなってしまったようで皆様に申し訳ないですm(_ _)m コメントありがとうございました!
x_x

2018/03/27 05:25

liだと範囲が広すぎるので、子のbuttonまで見たほうがよくないですか?
yukabyo

2018/03/27 05:38

そうですね、質問文の内容を追記しました。 皆様ありがとうございました!
kei344

2018/03/27 05:43

To: x_xさん 検証お手数おかけして申し訳ありません。いつもありがとうございます。 > liだと範囲が広すぎるので、子のbuttonまで見たほうがよくないですか? デベロッパーツールで確認した際にliにイベントが貼られていたのでそのようにしています。(buttonでも反応すると思います)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問