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

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

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

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

Q&A

解決済

1回答

1339閲覧

slickスライダーの自動再生について(ホバーでたまに止まってしまう)

sii_mama

総合スコア7

JavaScript

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

0グッド

1クリップ

投稿2020/06/05 08:12

前提・実現したいこと

slickで自動再生のスライダーを作っています。

発生している問題・エラーメッセージ

が、3回に1回くらい、マウスホバーするとスライダーが止まってしまいます。。。

特に関係ありそうなものは出ていませんが、 Mixed Content: The page at 'https:~' was loaded over HTTPS, but requested an insecure image 'http:~'. This content should also be served over HTTPS. こちらのfavicon、fontは全て出ています。 (しかし、favicon/fontの設定はないですし、imgも相対パスなので関係ないと思うのですが。。。)

該当のソースコード

html

1<head> 2<link rel="stylesheet" href="js/slick.css"> 3<link rel="stylesheet" href="js/slick-theme.css"> 4<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 5</head> 6<ul id="slider"> 7 <li><img src="img/slider/01.jpg"></li> 8 <li><img src="img/slider/02.jpg"></li> 9 <li><img src="img/slider/03.jpg"></li> 10 <li><img src="img/slider/04.jpg"></li> 11 <li><img src="img/slider/05.jpg"></li> 12 <li><img src="img/slider/06.jpg"></li> 13 <li><img src="img/slider/07.jpg"></li> 14 <li><img src="img/slider/08.jpg"></li> 15 <li><img src="img/slider/09.jpg"></li> 16 <li><img src="img/slider/10.jpg"></li> 17 <li><img src="img/slider/11.jpg"></li> 18 <li><img src="img/slider/12.jpg"></li> 19 <li><img src="img/slider/13.jpg"></li> 20 <li><img src="img/slider/14.jpg"></li> 21</ul> 22. 23. 24. 25 26<script src="js/slick.min.js"></script> 27<script src="js/common.js"></script> 28</body> 29

js

1$(function(){ 2 $('#slider').slick({ 3 arrows: true, 4 autoplay: true, 5 slidesToShow: 7, 6 autoplaySpeed: 0, 7 cssEase: 'linear', 8 speed: 5000, 9 slidesToScroll: 1, 10 infinite: true, 11 pauseOnFocus: false, 12    pauseOnHover: false, 13 responsive: [{ 14 breakpoint: 768, 15 settings: { 16 slidesToShow: 4 17 } 18 } 19 ] 20 }); 21}); 22

試したこと

初心者なので、
pauseOnFocus: false,
pauseOnHover: false,
を入れるところくらいまでしか追いかけられませんでした。
※slickのファイルは最新のものをDLしています。

皆さまお忙しい中とは思いますが、どうぞよろしくお願いいたします。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQuery プラグインのslickですか。使ったことないので調べながらコード書きました。
次回からは

プラグインの場合はその配布元のリンクを質問文に書いてください。でないと著しく回答が付きにくくなります。

とりあえずslickは使ったこと無かったので、こちらのサイトを参考にコードを書いてみました。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>slider test</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 7<!--CSS--> 8<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 9<!--JS--> 10<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 11<style> 12 .slick-slide img { 13 height: 30vw; /*ポイント1*/ 14 max-height: 400px; /*ポイント2*/ 15 min-height: 350px; /*ポイント2*/ 16 } 17</style> 18</head> 19<body> 20 <ul id="slider" class="slick01 slick-slider"> 21 <li class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/01.jpg"></li> 22 <li class="slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false" tabindex="1" role="tabpanel" id="slick-slide02" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/02.jpg"></li> 23 <li class="slick-slide slick-current slick-active" data-slick-index="3" aria-hidden="false" tabindex="2" role="tabpanel" id="slick-slide03" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/03.jpg"></li> 24 <li class="slick-slide slick-current slick-active" data-slick-index="4" aria-hidden="false" tabindex="3" role="tabpanel" id="slick-slide04" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/04.jpg"></li> 25 <li class="slick-slide slick-current slick-active" data-slick-index="5" aria-hidden="false" tabindex="4" role="tabpanel" id="slick-slide05" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/05.jpg"></li> 26 <li class="slick-slide slick-current slick-active" data-slick-index="6" aria-hidden="false" tabindex="5" role="tabpanel" id="slick-slide06" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/06.jpg"></li> 27 <li class="slick-slide slick-current slick-active" data-slick-index="7" aria-hidden="false" tabindex="6" role="tabpanel" id="slick-slide07" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/07.jpg"></li> 28 <li class="slick-slide slick-current slick-active" data-slick-index="8" aria-hidden="false" tabindex="7" role="tabpanel" id="slick-slide08" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/08.jpg"></li> 29 <li class="slick-slide slick-current slick-active" data-slick-index="9" aria-hidden="false" tabindex="8" role="tabpanel" id="slick-slide09" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/09.jpg"></li> 30 <li class="slick-slide slick-current slick-active" data-slick-index="10" aria-hidden="false" tabindex="9" role="tabpanel" id="slick-slide10" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/10.jpg"></li> 31 <li class="slick-slide slick-current slick-active" data-slick-index="11" aria-hidden="false" tabindex="10" role="tabpanel" id="slick-slide11" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/11.jpg"></li> 32 <li class="slick-slide slick-current slick-active" data-slick-index="12" aria-hidden="false" tabindex="11" role="tabpanel" id="slick-slide12" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/12.jpg"></li> 33 <li class="slick-slide slick-current slick-active" data-slick-index="13" aria-hidden="false" tabindex="12" role="tabpanel" id="slick-slide13" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/13.jpg"></li> 34 <li class="slick-slide slick-current slick-active" data-slick-index="14" aria-hidden="false" tabindex="13" role="tabpanel" id="slick-slide14" aria-describedby="slick-slide-control01" style="width: 920px;"><img src="img/slider/14.jpg"></li> 35 </ul> 36 <ul class="slick-dots" style="" role="tablist"> 37 <li class="" role="presentation"> 38 <button type="button" role="tab" id="slick-slide-control00" aria-controls="slick-slide00" aria-label="1 of 3" tabindex="-1">1</button> 39 </li> 40 <!--...以下続く--> 41 </ul> 42 <!--前--> 43 <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="">Previous</button> 44 <!--次--> 45 <button class="slick-next slick-arrow" aria-label="Next" type="button" style="">Next</button> 46 47 <script> 48 $(function(){ 49 $('#slider').slick({ 50 arrows: true, 51 autoplay: true, 52 slidesToShow: 7, 53 autoplaySpeed: 0, 54 cssEase: 'linear', 55 speed: 5000, 56 slidesToScroll: 1, 57 infinite: true, 58 pauseOnFocus: false, 59 pauseOnHover: false, 60 responsive: [{ 61 breakpoint: 768, 62 settings: { 63 slidesToShow: 4 64 } 65 }] 66 }); 67 }); 68 </script> 69 70</body> 71</html>

こちらのコードで動き続ける画像にマウスホバーしても止まることは無く現象が再現できませんでした。
あと、コードの中に全角スペースが紛れ込んでいたので直してあります。
ひょっとすると、それが原因なのかもしれませんが、
質問文は、編集・追記できるので、省略せずにコードの全てを記載してください。
そのコードで現象が再現するか試してみないとこれ以上は回答のしようがありません。

投稿2020/06/15 08:22

編集2020/06/15 08:26
nekora

総合スコア501

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

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

sii_mama

2020/06/16 05:42

ありがとうございます! ほんとですね。。。リンク忘れておりました、失礼致しました。 試してみたら、止まらずスムーズにできました! ご指摘いただいたところは、次回から気をつけます。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問