jQueryを使用したスライダーの画像をスマホとPCで違う画像を表示させたい

jQueryを使用して背景画像のスライダーを作成したい

あるdiv要素に対して、背景を3つ指定してそれをスライダーで表示が切り替わるようにしました。
パソコンとスマホで使用している背景画像が違うので、それぞれ別の画像が表示させるようにしたいのですが
うまく切り替えることができません。

どなたか知恵貸して下さい。よろしくお願いします。

該当のソースコード

html
1<div class="main-visual></div>

css
1.main-visual {
2    height: 0;
3    position: relative;
4    padding-top: 47.5%;
5    text-align: center;
6
7@media screen and (max-width: 767px) {
8 .main-visual {
9     border: none;
10     padding-top: 138.5%;
11  }
12}

jQuery
1jQuery(function($) {
2    $('.main-visual').bgSwitcher({
3        images: ['assets/img/home/pc_main01.png','assets/img/home/pc_main02.png','assets/img/home/pc_main03.png'], 
4    });
5});

試したこと

jQuery
1var getDevice = (function(){
2    var ua = navigator.userAgent;
3    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
4        return 'sp';
5    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
6        return 'tab';
7    }else{
8        return 'other';
9    }
10})();
11
12if( getDevice == 'sp' ){
13    //スマホ
14    jQuery(function($) {
15        $('.sp_main-visual').bgSwitcher({
16            images: ['assets/img/home/sp_mainbg.jpg','assets/img/home/sp_mainbg.jpg','assets/img/home/sp_mainbg.jpg'], // 切り替える背景画像を指定
17        });
18    });
19}else if( getDevice == 'tab' ){
20    //タブレット
21    jQuery(function($) {
22        $('.main-visual').bgSwitcher({
23            images: ['assets/img/home/sp_mainbg.jpg','assets/img/home/sp_mainbg.jpg','assets/img/home/sp_mainbg.jpg'], // 切り替える背景画像を指定
24        });
25    });
26}else if( getDevice == 'other' ){
27    //その他
28    jQuery(function($) {
29        $('.main-visual').bgSwitcher({
30            images: ['assets/img/home/pc_main.png','assets/img/home/pc_main.png','assets/img/home/pc_main.png'], // 切り替える背景画像を指定
31        });
32    });
33}