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… が表示される仕様になっています。
あなたの回答
tips
プレビュー