レスポンシブ対応のsliderについて

Question

レスポンシブサイトにsliderを導入したいのですが、
ウィンドウのサイズが変わると、（スマホ用に）別で用意した画像に変更されるようにするにはどうすればよいでしょうか？

slider-proというjQueryで作成しており、
下記のサイトを参考に作成中してます。
http://sterfield.co.jp/designer/クールでカッコイイいろんな機能満載のスライダ.html

smallSizeにウィンドウサイズと画像を指定するのかと思っていたのですが、適用されませんでした。

初心者な質問で恐縮ですが、
どのように記述すればよいか教えていただけると助かります。。。

Answer 1

全く質問から趣旨がずれていたらごめんなさい

cssで、該当のスライダーに使用しているimgを
width:100%;にしたら可変になりませんでしょうか？

Answer 2

先日書いたスクリプトですが、
まずブレイクポイントを変数にセットします。（736のとこです）
ブレイクポイントというのは、「ここからはスマホね」的な「画面の横幅のルール」です。
んで、切り替えたいスマホ用画像のファイル名の末尾を「_sp」とつけておきます。
例）
[PC用] image.png
[SP用] image_sp.png
で、切り替わって欲しい画像に.imgChangeというclassをつけます。
で、リサイズごとにimgChange()を実行してあげれば完了です。（jsの1～3行目）

以上です。
今やってるプロジェクト用に書いたので、ご参考まで。

$(window).bind('resize load', function(){
	imgChange();
});

/* 画像変更
 *************************************************/
function imgChange(){
	var breakPoint = 736;
	var windowW = $(window).width(),
	src, fileName, fileExtension;
	if( windowW <= breakPoint ){
		$('.imgChange').each( function(){
			fileName = $(this).attr('src').slice(0,-4);
			fileExtension = $(this).attr('src').substr(-3);
			src = $(this).attr('src');
			$(this).attr('src', (fileName + '_sp' + '.' + fileExtension).replace(/_sp_sp/g,'_sp'))
		})
	} else {
		$('.imgChange').each( function(){
			fileName = $(this).attr('src').slice(0,-4);
			fileExtension = $(this).attr('src').substr(-3);
			src = $(this).attr('src');
			src = (fileName + '_sp' + '.' + fileExtension).replace(/_sp/g,'');
			$(this).attr('src', src);
		});
	}
}

Comments

[1000]

あ、ごめんなさい！このプラグインとか関係なく回答してました。。
どちらかというとプラグインの使い方の質問ですよね、すみません。汎用的なものを書いてしまいました。スルーしていただければ。