slider-proでスライダーの画像をPCとスマホでは違うのもの使用したい。

レスポンシブデザインで、トップページにスライダーを置きたいです。
スマホサイトと、PCサイトで違う画像を使って実装したいです。

slider-proを使いたいのですが、なかなかうまくいきません。
一番簡単に、PC用とスマホ用にhtmlを書いて、CSSでメディアクエリを使ってそれぞれを消そうとしたのですが、スマホサイト用がうまく表示されません・・・。

slider-proでなくてもいいので、何か参考になるものをご存じの方がいらっしゃったらよろしくお願いしますm(__)m
ただslider-proのデザインも気に入っているので、もしできたらslider-proがいいです。

<div class="pc">
      <div id="slider-pro" class="slider-pro" >
        <div class="sp-slides">
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/01_pc.png"></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/02_pc.jpg"></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/03_pc.jpg"></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/04_pc.jpg"></div>
        </div>
      </div>
</div>

<div class="sp">
      <div id="slider-pro" class="slider-pro" >
        <div class="sp-slides">
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/01_sp.png"></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/02_sp.png"></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/01_sp.png"></div>
          <div class="sp-slide"><img class="sp-image" src="images/main_photo/02_sp.png"></div>
        </div>
      </div>
</div>

@charset "utf-8";
/* CSS Document */
.sp {
	display: none;
}
.pc {
	display: block;
}
 @media (max-width: 500px) {
 .pc {
 display: none;
}
 .sp {
 display: block;
}
}

$( document ).ready(function( $ ) {
$( '#slider-pro' ).sliderPro({
buttons: true, //スライダーのページャを表示する
thumbnailWidth:80,
startSlide: 0, //最初のスライドを指定する
arrows: true, //左右の矢印ボタンを表示する
width: '90', //横幅を設定する
aspectRatio:3,
autoHeight:true,
loop: true, //スライドをループさせる設定
autoplay: true, //自動再生の設定
visibleSize: '0%', //前後のスライドを表示するかの設定
forceSize: 'fullWidth',
slideDistance :2000, //スライド間の距離(px)
//forceSize: 'fullWidth' //スライダーの幅をブラウザ幅に設定する
});
});

コード