PC版とスマホ版でjavascriptの切り替え

Question

PC版とスマホ版で
スライドの背景画像を切り替えたいと考え、
幅640のサイズ以下の時に対応するようにコードを記載しましたが、
PCは、正常に動作するのですが、
スマホ版の際が動作しません。
どこかコードが間違っているのでしょうか。

var windowWidth = $(window).width();
var windowSm = 640;
if (windowWidth <= windowSm) {
    横幅640px以下のとき（つまりスマホ時）に行う処理を書く
    $('.bg-slider').bgSwitcher({
   images: ["./img/test_sp.jpg", "./img/test02_sp.jpg", "./img/test03_sp.jpg",],
        effect: "fade",
        easing: "swing",
        loop: true
});
} else {
    横幅640px超のとき（PC）に行う処理を書く
    jQuery(function($) {
    $('.bg-slider').bgSwitcher({
   images: ["./img/test.jpg", "./img/test02.jpg", "./img/test03.jpg",],
        effect: "fade",
        easing: "swing",
        loop: true
    });
});
}

Comments

[m.ts10806]

コードブロック内には基本的に実際のコード以外を入れないでください。
コメントはちゃんとプログラミング言語にそったコメントの書き方か、コードブロックからは外に出してください。

[m.ts10806]

あとコードは誰でも再現可能な状態でご提示ください。HTML,CSSは必要です。
見たところ「スマートフォン用の画像が表示される」でしょうか。これだと効果を実感しにくいと思います。
背景色を全く違うものに変えるとか、もっと効果が分かりやすい確認方法をとってから実際にやりたいことにうつっては。

[kei344]

コメントがコメントアウトされていませんが、実際にこのコードなのでしょうか。

Answer 1

ifの中にjQuery(function($) {...});があるってことは、Scriptタグ直下にこのコードをべた書きしているんですかね？
だとしたら640px以下の方はページ(bg-sliderクラスを持つ要素)がロードされる前に$('.bg-slider').bgSwitcher(...);が実行されているんじゃないでしょうか。

こんな感じ？

$(function(){
    var windowWidth = $(window).width();
    var windowSm = 640;
    var bgImages;
    if(windowWidth <= windowSm) {
        bgImages = ["./img/test_sp.jpg", "./img/test02_sp.jpg", "./img/test03_sp.jpg",];
    } else {
        bgImages = ["./img/test.jpg", "./img/test02.jpg", "./img/test03.jpg",];
    }
    $('.bg-slider').bgSwitcher({
        images: bgImages,
        effect: "fade",
        easing: "swing",
        loop: true,
    });
});