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

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

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

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

jQuery

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

Q&A

解決済

1回答

3018閲覧

jQuery slickを使ってスライダー作成しましたが、hoverしても止まりません。

Kuriaki

総合スコア85

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/10/24 02:33

編集2017/10/24 04:25

タイトル通りですが、
slickでスライダーを作成しましたが、マウスをスライダーにホバーしても止まらずに流します。
ちなみにスライダーはサムネイル付きタイプです。

jquery

1<script> 2$(function(){ 3$('.thumb-item').slick({ 4autoplay:true, 5autoplaySpeed:4000, 6dots:false, 7pauseOnHover:true, 8asNavFor: '.thumb-item-nav', 9prevArrow: '<img src="common/img/prev_2.png" class="slick-prev22">', 10nextArrow: '<img src="common/img/next_2.png" class="slick-next22">', 11fade:false 12}); 13 14$('.thumb-item-nav').slick({ 15autoplay:true, 16autoplaySpeed:4000, 17dots:false, 18asNavFor: '.thumb-item', 19accessibility: true, 20slidesToShow: 5, 21slidesToScroll: 1, 22prevArrow: '<img src="common/img/prev.png" class="slick-prev33">', 23nextArrow: '<img src="common/img/next.png" class="slick-next33">', 24focusOnSelect: true 25}); 26}); 27</script>

コードの通り、pauseOnHoverをtrueにしましたが、止まりませんでした。
それと、asNavForでサムネイルとコネクトしていますが、asNavForを削除すれば、pauseOnHoverが普通に止まるようになります。

この二つを共存させるにはどうすればよいでしょうか?
ご回答宜しくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

.thumb-itemと.thumb-item-navの両方ともautoplayが有効のため、pauseOnHoverが効かないのだと思います。

pauseOnHoverを止めて、slickのメソッドで対応してみてはどうでしょうか?(下のコードは未検証です

javascript

1var $thumbs = $('.thumb-item, .thumb-item-nav'); 2$thumb 3 .on('mouseover', function () { 4 $thumbs.slick('pause'); 5 }) 6 .on('mouseout', function () { 7 $thumbs.slick('play'); 8 });

投稿2017/10/24 05:44

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Kuriaki

2017/10/24 06:06

ありがとうございます! autoplayを一個消したら止まるようになりました! いきなり申し訳ないですが、 もう一つお聞きしたいのですが、コネクトしてある以上、メイン画像とサムネイル画像を流してる状態で、メイン画像とサムネイル画像の順番を永遠に一個ずれることは可能でしょうか? 簡単にいいますと、デフォルトでメインが2番目画像、サムネイルが3番目画像、そしてメイン画像が3番目になったときにサムネイル画像が4番目になることです。 今のままですと、デフォルトを違う画像にしても、サムネイル画像はメイン画像についてきて、同じ画像になってしまいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問