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

前提・実現したいこと

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

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

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

特に関係ありそうなものは出ていませんが、
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/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ベストアンサー

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