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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

Q&A

解決済

1回答

20302閲覧

swiper.jsでウィンドウ幅によって処理を切り替えたい

yanocchi

総合スコア18

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

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

0グッド

2クリップ

投稿2016/10/10 04:10

編集2016/10/10 04:29

###前提・実現したいこと
swiper.jsを使って以下ウィンドウ幅でカルーセル表示を切り替えたいです。
・769px以上 → 横スライダー
・768px以下 → 縦スライダー

swiper.js:公式サイト
http://idangero.us/swiper/#.V_sUWSGLSUk

###発生している問題・エラーメッセージ
swiper.jsのオプション「breakpoints」で表示画像数の切り替え等はできるのですが、
縦・横スライダーの切り替えをするには、どうソースを書いていいか分からない状況です。

###該当のソースコード

var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', slidesPerView: 5, paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 60, watchSlidesVisibility: true, breakpoints: { 768: { direction: 'vertical', slidesPerView: 3, spaceBetween: 10 } } });

###補足情報(言語/FW/ツール等のバージョンなど)
swiper.js:API情報
http://idangero.us/swiper/api/

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

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

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

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

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

kei344

2016/10/10 04:25

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、URLにはリンクを張ることができますので、編集よろしくお願いします。
yanocchi

2016/10/10 04:30

失礼いたしました、ご指摘ありがとうございます!修正いたしました
guest

回答1

0

ベストアンサー

JavaScript

1$( window ).resize( function(){ 2 if ( window.innerWidth > 768 ) { 3 mySwiper.params.direction = 'horizontal'; 4 } else { 5 mySwiper.params.direction = 'vertical'; 6 } 7 mySwiper.update(); 8} ); // 未テスト

とかでどうでしょう。


追記:

mySwiper.update() が半端にしか効かないのでmySwiper.destroy( true, true ) で削除し、再生成する方法で。

JavaScript

1$( window ).resize( function(){ 2 if ( window.innerWidth > 768 ) { 3 mySwiper.params.direction = 'horizontal'; 4 } else { 5 mySwiper.params.direction = 'vertical'; 6 } 7 // mySwiper.update(); 8 var prm = mySwiper.params; // パラメータを保存 9 mySwiper.destroy( true, true ); // 削除 10 mySwiper = new Swiper ('.swiper-container', prm ); // 再設定 11} ); 12```**動くサンプル:**[https://jsfiddle.net/umnLfym5/](https://jsfiddle.net/umnLfym5/) 13

投稿2016/10/15 08:06

編集2016/10/16 17:59
kei344

総合スコア69364

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

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

yanocchi

2016/10/16 16:31

お返事遅くなり申し訳ございません!またご回答ありがとうございます。 試してみたのですが、「Uncaught SyntaxError: Unexpected token :」とエラーが出て実装できませんでした。。。
kei344

2016/10/16 16:34

あ、「.autoplay = direction:」⇒「.direction = 」に読み替えてみてください。 本文も修正します。
yanocchi

2016/10/16 17:25

早々のご対応ありがとうございます! 修正したのですが、上手く動きませんでした。。。 自分でももう少し色々試してみます。
kei344

2016/10/16 17:59

追記しました。
yanocchi

2016/10/20 16:18

お返事大変遅くなり申し訳ございません! 思っていた動きができました! サンプルまで実装していただきありがとうございます、 大変勉強になりました、本当にありがとうございました!
ykyk

2016/11/11 10:48

失礼します。 コメントのやり方が間違ってたらすみません。 私も同じ問題に当たり、こちらを参考にさせて頂き問題なく動作するようになりました。 スライダーひとつで問題ないのですが複数の場合はうまくリサイズ後うまく動作しなくなってしまいます。 私の場合は992px以下は1枚ずつ、それ以上は2枚ずつスライドしたいのですが 上手くいきません。 どうかご教授おねがいします。 var mySwiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, slidesPerView: 1, slidesPerColumn: 2, slidesPerColumnFill: 'row', breakpoints: { //991以下 991: { slidesPerView: 1, slidesPerColumn: 1, } } }); $( window ).resize( function(){ if ( window.innerWidth > 992 ) { mySwiper.params.slidesPerColumn = 1; } else { mySwiper.params.slidesPerColumn = 2; } // mySwiper.update(); var prm = mySwiper.params; // パラメータを保存 mySwiper.destroy( true, true ); // 削除 mySwiper = new Swiper ('.swiper-container', prm ); // 再設定 }); });
kei344

2016/11/11 14:39

To: ykykさん 質問を新たにするほうが回答が望めますよ。 コードはよく見ていませんが、複数の場合はそれぞれ個別に扱ってみては?
ykyk

2016/11/22 04:40

有難うございます。もう少し考えてみてダメそうなら改めて質問立てます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問