Jqueryを使用して背景画像３枚をPC表示、SP表示それぞれ別の画像を使って、スライドショーのように切り替えたい

前提

デザインカンプを元にランディングページを制作しています。

header部分で背景画像３枚をPC表示、SP表示（ブレイクポイントは横767px以下をSP表示、768px以上をPC表示とする）それぞれ別の画像を使って、スライドショーのように切り替えたいと思っています。現在JqueryプラグインBgSwitchweを活用してPC表示の背景画像３枚をスライドショーのように表示することができています。しかしSP表示で別の画像３枚をスライドショーのようにさせたいのですがうまくいきません。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

背景画像３枚をPC表示、SP表示それぞれ別の画像を使って、スライドショーのように切り替えたい

発生している問題・エラーメッセージ

SP表示の画像がスライドショーのように表示されない。

エラーメッセージ

該当のソースコード

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/jquery.bgswitcher.js"></script>
<script>
jQuery(function($) {
  if (window.matchMedia('(min-width: 768px)').matches) {
    $('.bg-slider').bgSwitcher({
        images: ['img/cover_01_pc.jpg','img/cover_02_pc.jpg','img/cover_03_pc.jpg'], // 切替背景画像を指定
    interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
        loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
        shuffle: false, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
        effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
        duration: 500, // エフェクトの時間を指定します。
        easing: "swing" // エフェクトのイージングをlinear,swingから指定
    });
} else {
  jQuery(function($) {
    $('.bg-slider').bgSwitcher({
        images: ['img/cover_01_sp.jpg','img/cover_02_sp.jpg','img/cover_03_sp.jpg'], // 切替背景画像を指定
    interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
        loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
        shuffle: false, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
        effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
        duration: 500, // エフェクトの時間を指定します。
        easing: "swing" // エフェクトのイージングをlinear,swingから指定
    });
});
}
  
});
</script>