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

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

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

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

jQuery

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

Q&A

解決済

2回答

22514閲覧

レスポンシブでPCレイアウトの時にプラグイン適用を解除したい

aKusano

総合スコア3763

JavaScript

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

jQuery

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

1グッド

5クリップ

投稿2016/07/12 05:39

レスポンシブサイトの制作で、「スマホレイアウトの時だけプラグイン適用したい」という要望があり、
ネットの情報を参考に「スマホ時にプラグイン適用」まではできたのですが、
ウィンドウサイズ変更でPCレイアウトにした時に、一度適用されたプラグイン(スライダー等)を解除するにはどうしたら良いのか分かりません。
現状のコードは以下の通りです。

JavaScript

1$(function(){ 2 3function slideHuck(){ 4 var w = $(window).width(); 5 var size = 640; 6 if (w <= size) { 7 //スマホレイアウト時にスライダープラグインを実行 8 $("#slider01").slick(); 9 } else { 10 //★PCレイアウトの時にはスライダー等の処理を解除したい 11 } 12} 13slideHuck(); 14 15var timer = false; 16$(window).resize(function() { 17 if (timer !== false) { 18 clearTimeout(timer); 19 } 20 timer = setTimeout(function() { 21 //リサイズ完了時に実行 22 slideHuck(); 23 }, 200); 24}); 25 26});

スマホ幅からPC幅にウィンドウサイズを変更した際に再読み込みすればもちろん解除にはなるのですが、
再読み込みせずに自動的に解除できる方法があるならそうしたいです。
「一度実行したものを解除する」という考え方自体がもしかしたらよろしくないのかもしれませんが、
現状自分の知識の範囲だとそれ以外の方法が思いつきません。
何か参考になるアドバイスをいただけますと助かります。
(JSについてはjQueryなら何とか、、という程度なので、もし生JavaScriptの機能等が必要になるようでしたら、どの辺を勉強すれば良いのか合わせてアドバイスいただけますと嬉しいです。)

なお、スマホレイアウト時にだけ実行されるのは、スライダー等の既存のプラグインの場合もありますし、
自作の関数である場合もあります。どちらでも共通でできる方法があればよいですが、
既存プラグイン実行と自作関数実行の場合でもし手法が異なるようでしたら、それぞれの場合の考え方・必要な機能等の情報をいただけますと助かります。

よろしくお願い申し上げます。

mondaminZ👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

responsiveオプションでbreakpointを設定でき、unslick: true で「slickを適用しない」ということが出来るようです。

【slick - the last carousel you'll ever need】
http://kenwheeler.github.io/slick/

【レスポンシブ対応のjQueryカルーセル 「slick」 - Jumpei Sato】
http://sakic.jp/blog/web/jquery-slick

JavaScript

1 $(function(){ 2 $('.slider').slick({ 3 slidesToShow: 1, //画面上に何個表示させるか 4 slidesToScroll: 1, //何個ずつスクロールさせるか 5 autoplay: true, //自動再生させるか 6 autoplaySpeed: 4000, //自動再生の間隔 7 dots: false, //下のドットは表示させるか 8 arrows: true, //左右のナビゲーションは表示させるか 9 infinite: true, //ループさせるかどうか 10 centerMode: true, //表示中のスライドをセンターに配置するか 11 responsive: [ //レスポンシブの設定 12 { 13 breakpoint: 1024, //ブレークポイント1の値 14 settings: { //ブレークポイント1のオプション 15 slidesToShow: 3, 16 slidesToScroll: 3, 17 infinite: true, 18 dots: true 19 } 20 }, 21 { 22 breakpoint: 600, //ブレークポイント2の値 23 settings: { //ブレークポイント2のオプション 24 slidesToShow: 2, 25 slidesToScroll: 2 26 } 27 }, 28 { 29 breakpoint: 400, //ブレークポイント3の値 30 settings: { //ブレークポイント3のオプション 31 unslick: true //slickを適用しない 32 } 33 }, 34 }); 35 });

また、$('.your-slider').slick('unslick'); としても解除できるのでは。

投稿2016/07/12 07:39

kei344

総合スコア69574

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

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

aKusano

2016/07/12 10:10

ご回答ありがとうございます。 >>unslick: true で「slickを適用しない」ということが出来るようです。 なんと!そのオプションは見逃していました。 まだ実際に試してはいませんが、スライダーの適用/非適用についてはそれで行けそうな雰囲気がしてきました。試してみてまた結果をご報告させていただきます。 情報ありがとうございました!
aKusano

2016/07/12 10:36

$('.your-slider').slick('unslick');という記述では解除できませんでしたが、 function slideHuck(){ var w = $(window).width(); var size = 640; if (w <= size) { $("#slider01").slick(); /*slickを適用*/ } else { $("#slider01").unslick(); /*slickを解除*/ } } のようにしたら画面サイズに応じて自動的にスライダー解除できました!! 大変助かりました!ありがとうございます。
guest

0

多くのスライダー系のjQueryプラグインでは、実行することによりDOMの操作がなされ、DOM(HTML)の構造が変更されます。
これを解除するには、そっくりそのまま元に戻す(逆の挙動をする)メソッドを実装するか、元のDOMを記憶しておいてWindow幅が戻った時にDOMをリセットするかしなければなりません。

現実的に解消するとすれば、PCとスマホで別々の要素を用意しておいて、CSSでWindow幅ごとにdisplay: none;等を切り替えて割り当てるのがいいかと思います。

投稿2016/07/12 06:51

moriyama

総合スコア259

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

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

aKusano

2016/07/12 10:07

ご回答ありがとうございます。 >>現実的に解消するとすれば、PCとスマホで別々の要素を用意しておいて 今回の案件ではそれをやると運用負荷が跳ね上がるので、選択肢としては取れないのです。。 「元のDOMを記憶しておいてWindow幅が戻った時にDOMをリセット」については何をどうしたら実現できるのかサッパリ分からない状態なので今の私には難しそうですね。。。 適切なタイミングでリロードを入れる方向で考える方が良さそうな気がしてきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問