bxslider.jsの"fade"挙動について

Question

ーーー
bxslider.jsでfadeを滑らかに写真を３枚無限ループしたい
ーーー

webデザイン超初心者です.
bxsliderの機能を実装中に2枚目３枚目から1枚目に戻るスライダーが滑らかにfadeしません。一旦画面が真っ白くなり、fadeで１枚目に戻るのですが、fadeで切り替えながら写真をループさせたいのですが、なぜ真っ白くなるのか何が原因なのか、わかりません。
ーーー
html
ーーー

<!-- bxSlider Javascript file -->
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
jQuery(document).ready(function($) {
	//PC環境の場合
	if (window.matchMedia( '(min-width: 639px)' ).matches) { //切り替える画面サイズ
		$('.bxslider').bxSlider({
  		auto: 'true',
  		});
	//モバイル環境の場合
	} else {
	    $('.bxslider').bxSlider({
  		auto: 'true',
  		mode: 'fade' ,
  		touchEnabled:'false'
  		});
	};
});
</script>


<script type="text/javascript" src="totop.js"></script>
	<script>
	$(function() {
		var pull 		= $('#pull');
			menu 		= $('nav ul');
			menuHeight	= menu.height();

		$(pull).on('click', function(e) {
			e.preventDefault();
			menu.slideToggle();
		});

		$(window).resize(function(){
    		var w = $(window).width();
    		if(w > 320 && menu.is(':hidden')) {
    			menu.removeAttr('style');
    		}
		});
	});
</script>
	
    <!--メディアきりかえ-->
<script type="text/javascript">
jQuery(document).ready(function($) {
	//PC環境の場合
	if (window.matchMedia( '(min-width: 639px)' ).matches) { //切り替える画面サイズ
		$('.bxslider').bxSlider({
  		auto: 'true',
  		});
	//モバイル環境の場合
	} else {
	    $('.bxslider').bxSlider({
  		auto: 'true',
  		mode: 'fade' ,
  		touchEnabled:'false'
  		});
	};
});
</script>

<!--スライダー-->
<div class="pc">
<ul class="bxslider">
  <li><img src="img/pc_slider01.png"></li>
  <li><img src="img/pc_slider02.png"></li>
  <li><img src="img/pc_slider03.png"></li>
</ul>
</div>
<div class="sp"> 
<ul class="bxslider">
  <li><img src="img/sp_slider01.png"></li>
  <li><img src="img/sp_slider02.png"></li>
  <li><img src="img/sp_slider03.png"></li>
</ul>
</div>

<!--/スライダー-->

Comments

[kei344]

bxslider.jsの内容はご自身で編集されていない限り質問文に書かなくて良いです。むしろどうやって呼び出しているかが必要なので、ご自身で書かれたJavaScriptおよびbxslider.jsで動かすHTML周辺を記載してください。

[退会済みユーザー]

kei344様
htmlを記載いたしました。
どうぞよろしくお願いいたします。

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

kei344様
htmlをコードブロックでかこみました。（スライダー部分のみです）

[kei344]

何度も申し訳ないのですが、スライダー部分のHTMLはどうなっていますでしょうか。

[退会済みユーザー]

kei344様
スライダー部のコードを追加いたしました。

[kei344]

追加／編集ありがとうございます。

[退会済みユーザー]

kei344様

おはようございます。
javascript の問題と思われる箇所ですが、記述頂いたスクリプトを実行するという事で理解してよいでしょうか。
上と下はどちらを使用したら良いでしょう。理解していなくてすみません。よろしくお願い致します！

Answer 1

こうしてみてはいかがでしょうか。多分ですが、表示していない方のul要素の中身まで取得している気がします。

if (window.matchMedia( '(min-width: 639px)' ).matches) { //切り替える画面サイズ
    $('.pc > .bxslider').bxSlider({
      auto: 'true',
      });
//モバイル環境の場合
} else {
    $('.sp > .bxslider').bxSlider({
      auto: 'true',
      mode: 'fade' ,
      touchEnabled:'false'
      });
};

あと、下記部分は思ったように動いていない（エラーにはなりませんが問題の元です）と思われます。

var pull         = $('#pull');
    menu         = $('nav ul');		// varで宣言されていない
    menuHeight    = menu.height();	// 	〃

var pull         = $('#pull');
var menu         = $('nav ul');
var menuHeight    = menu.height();
```or
```JavaScript
var pull         = $('#pull')		// 末尾のセミコロンを取ってます
  , menu         = $('nav ul')		// 	〃
  , menuHeight   = menu.height()	// 	〃
  ;

Comments

[退会済みユーザー]

これから実装してみます。ありがとうございます！

[退会済みユーザー]

kei344様

おはようございます。
javascript の問題と思われる箇所ですが、記述頂いたスクリプトを実行するという事で理解してよいでしょうか。
上と下はどちらを使用したら良いでしょう。理解していなくてすみません。よろしくお願い致します！

[kei344]

> 上と下はどちらを使用したら良いでしょう
こちらをお使いください。
var pull = $('#pull');
var menu = $('nav ul');
var menuHeight = menu.height();

> 記述頂いたスクリプトを実行する
どこのことを言っておられるのでしょうか。また、実行するというのはどのような操作を想定されていますか？

[退会済みユーザー]

kei344様
うまく動作しました！ありがとうございます！感謝します！