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

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

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

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

jQuery

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

Q&A

解決済

1回答

896閲覧

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

pikurusudakedo

総合スコア58

JavaScript

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

jQuery

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

0グッド

2クリップ

投稿2019/10/12 09:33

編集2019/10/12 14:46

画面の縦向きと横向きで読み込む処理を変えたいです
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>

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

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

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

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

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

naomi3

2019/10/12 12:44

HTMLもつけてください。
pikurusudakedo

2019/10/12 14:48

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

回答1

0

ベストアンサー

slick ver1.8.1
jquery ver3.4.1

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

1.slickの二重実行はできない

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

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

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

2.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});

以上、ご参考までに。。。

投稿2019/10/16 05:50

mix-peach

総合スコア1910

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

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

pikurusudakedo

2019/10/17 14:52

ありがとうございます!やってみます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問