画面の向きを変える度に、リロードなしで随時処理を読み込みたい

画面の縦向きと横向きで読み込む処理を変えたいです
slickを用いたスライドショーです

JavaScript
1<script>
2            $(function mq(){
3                if(window.matchMedia('screen and (orientation:landscape)').matches){
4                    $('.slide_1').slick({
5                        arrows: false,
6                        autoplay: true,
7                        autoplaySpeed: 4000,
8                        slidesToShow: 4,	
9                        dots: true,
10                        pauseOnHover: false,
11                        pauseOnDotsHover: false,
12                        waitForAnimate: false,
13                        swipe: false,
14                    });
15                    $('.slide_2').slick({
16                        arrows: false,
17                        autoplay: true,
18                        autoplaySpeed: 4000,
19                        slidesToShow: 4,	
20                        dots: true,
21                        pauseOnHover: false,
22                        pauseOnDotsHover: false,
23                        waitForAnimate: false,
24                        rtl: true,
25                        swipe: false,
26                    });
27                    $('.slide_3').slick({
28                        arrows: false,
29                        autoplay: true,
30                        autoplaySpeed: 4000,
31                        slidesToShow: 4,
32                        dots: true,
33                        pauseOnHover: false,
34                        pauseOnDotsHover: false,
35                        waitForAnimate: false,
36                        swipe: false,
37                    }); 
38                }else{
39                    $('.slide_1').slick({
40                        arrows: false,
41                        autoplay: true,
42                        autoplaySpeed: 4000,
43                        slidesToShow: 3,	
44                        dots: true,
45                        pauseOnHover: false,
46                        pauseOnDotsHover: false,
47                        waitForAnimate: false,
48                        swipe: false,
49                    });
50                    $('.slide_2').slick({
51                        arrows: false,
52                        autoplay: true,
53                        autoplaySpeed: 4000,
54                        slidesToShow: 3,	
55                        dots: true,
56                        pauseOnHover: false,
57                        pauseOnDotsHover: false,
58                        waitForAnimate: false,
59                        rtl: true,
60                        swipe: false,
61                    });
62                    $('.slide_3').slick({
63                        arrows: false,
64                        autoplay: true,
65                        autoplaySpeed: 4000,
66                        slidesToShow: 3,
67                        dots: true,
68                        pauseOnHover: false,
69                        pauseOnDotsHover: false,
70                        waitForAnimate: false,
71                        swipe: false,
72                    });
73                }
74                
75               $(window).resize(mq);
76            });
77        </script>

向きを変えてからリロードすれば問題ないのですが、リロードしないと条件分岐後の処理が行われず以下のようなエラーになります

Uncaught TypeError: Cannot read property 'add' of null
    at Object.e.initADA (slick.min.js:1)
    at Object.e.init (slick.min.js:1)
    at new <anonymous> (slick.min.js:1)
    at k.fn.init.i.fn.slick (slick.min.js:1)
    at mq (gallery-1.html:59)
    at dispatch (jquery-3.4.1.min.js:2)
    at v.handle (jquery-3.4.1.min.js:2)

HTML
1<!doctype html>
2<html lang="ja>">
3    <head>
4        <meta charset="utf-8">
5    </head>
6    <body>
7        <article class="gallery">
8            <ul class="slide_1">
9                <li><a href="pictures/photogaph1-min/Tanaka_img%20(1).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(1).jpg"></a></li>
10                <li><a href="pictures/photogaph1-min/Tanaka_img%20(2).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(2).jpg"></a></li>
11                <li><a href="pictures/photogaph1-min/Tanaka_img%20(3).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(3).jpg"></a></li>
12                <li><a href="pictures/photogaph1-min/Tanaka_img%20(4).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(4).jpg"></a></li>
13                <li><a href="pictures/photogaph1-min/Tanaka_img%20(5).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(5).jpg"></a></li>
14                <li><a href="pictures/photogaph1-min/Tanaka_img%20(6).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(6).jpg"></a></li>
15                <li><a href="pictures/photogaph1-min/Tanaka_img%20(7).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(7).jpg"></a></li>
16                <li><a href="pictures/photogaph1-min/Tanaka_img%20(8).jpg" class="zoom"><img src="pictures/photogaph1-min/Tanaka_img%20(8).jpg"></a></li>
17            </ul>
18        </article>
19    </body>
20</html>

naomi3

2019/10/12 12:44

HTMLもつけてください。

pikurusudakedo

2019/10/12 14:48

HTML追記しました slide_1しか載せてませんが実際は同じようにスライド２，３と続きます

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

回答1件

ベストアンサー

slick　ver1.8.1
jquery ver3.4.1

で、動作確認をしたところ、問題だと思う点が２つありました。

１．slickの二重実行はできない

一度$().slick()を実行した要素に対して、もう一度この記述を実行することはできないようです。

2回目以降は、先に前回動作させたslickを破棄$().sclick('unslick')する必要があるのかな、と。

今回の場合は、スライド数を変えるだけのようなので、わざわざもう一度$().slick()とするまでもなく、オプションを変更する例：$().slick('setOption',{slidesToShow: 3});だけでも、対応可能そうです。

２．windowのresizeイベントへの処理追加について

こちらは質問内容に直接は関係ないのですが・・

windownのresize時に実行されるmq()の中で、最後に$(window).resize(mq);と、resizeイベントにどんどん処理が追加されていくのは、よろしくないかなと。

リサイズのイベントは通常で何度か繰り返して発生するものですが、そこに倍倍で処理が追加されていくことになるので、リサイズを繰り返していくだけで、いずれ画面が固まることになりそうです。

提示されたHTMLの場合、下記のコードで、スライド数の変更が出来ましたよ。

javascript
1var sl = false;
2$(window).on('load resize', function(){
3	var show_num = 3;
4	if(window.matchMedia('screen and (orientation:landscape)').matches){
5		show_num = 4;
6	}
7	if(sl){
8	  //2回目以降は、スライド数だけ変えます。
9	  $(sl).slick('setOption',{slidesToShow: show_num});
10	}else{
11	  //初回はこちらを通ります。
12		sl = $('.slide_1').slick({
13			arrows: false,
14			autoplay: true,
15			autoplaySpeed: 4000,
16			slidesToShow: 4,    
17			dots: true,
18			pauseOnHover: false,
19			pauseOnDotsHover: false,
20			waitForAnimate: false,
21			swipe: false,
22		});
23	}
24});