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

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

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

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

Q&A

0回答

1153閲覧

bxSliderのレスポンシブ時の表示順がおかしくなる

M.Kota

総合スコア1

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

0グッド

0クリップ

投稿2020/11/13 02:57

編集2020/11/16 04:34

wordpressにbxSliderが設置してあり、レスポンシブでスマホ時に画像が切り替わる設定になっています。
PC表示は三枚横並びでスクロール(左右の画像は半分程表示されてる)
SP時は一枚表示でスクロールです
なのですが、スマホ表示の時だけ一枚目の画像がスキップされてしまい、
表示順が 1枚目→一瞬だけ1枚目通り過ぎる→2枚目→3枚目…
となってしまいます。

$(window).load(function(){ にしようとしたのですが、
書き換えるとconsoleエラーが出てしまい、bxSliderが動きません。

jsの記述を正常に動くようにどのように記述すればいいか助けて頂きたいです。
どうぞよろしくお願いします。

■jQuery

jQuery(function($){ $('.mainvisual129-list').bxSlider({ speed: 750, auto: true, controls: false, pager: false, slideWidth: 1000, // 画像のサイズ minSlides: 1, maxSlides: 1, moveSlides: 1 }); /* 767px以下 → 正方形にする */ if (winW < 768) { $('.bx-viewport, .bx-wrapper li').height(winW); } $(window).on('load resize', function() { var $bx = $('.bx-viewport, .bx-wrapper li'); if (winW < 768) { $bx.height(winW); } else { $bx.css({ height: '' }); } }); /* 画像切り替え */ $('.bx-viewport li').switchBg({maxWidth:767}); });

■HTML

<div class="mainvisual129"> <ul class="mainvisual129-list"> <li class="mainvisual129-item-5" data-switch="<?php echo get_stylesheet_directory_uri(); ?>/images/index/mv190905.jpg"> <span class="sr-only"> <!-- 代替テキストが必要であれば、ここに入れてください。 --> </span> </li> <li class="mainvisual129-item-2" data-switch="<?php echo get_stylesheet_directory_uri(); ?>/images/index/mv02.jpg"> <span class="sr-only"> <!-- 代替テキストが必要であれば、ここに入れてください。 --> </span> </li> <li class="mainvisual129-item-3" data-switch="<?php echo get_stylesheet_directory_uri(); ?>/images/index/mv03.jpg"> <span class="sr-only"> <!-- 代替テキストが必要であれば、ここに入れてください。 --> </span> </li> <li class="mainvisual129-item-3" data-switch="<?php echo get_stylesheet_directory_uri(); ?>/images/index/mv04.jpg"> <span class="sr-only"> <!-- 代替テキストが必要であれば、ここに入れてください。 --> </span> </li> <li class="mainvisual129-item-1" data-switch="<?php echo get_stylesheet_directory_uri(); ?>/images/index/mv01.jpg"> <span class="sr-only"> <!-- 代替テキストが必要であれば、ここに入れてください。 --> </span> </li> </ul> </div>

スマホ時はmv190905-2x.jpgやmv01-2x.jpg… が表示される仕様になっています。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問