Vegas2で一定以下の横幅へのリサイズを条件に画像を変更したい

Question

スマホ対応で一定の横幅を割ると設定したスライド画像が変わるようにしたい

vegas.jsを利用して全画面スライドショーを背景に敷いたサイトデザインを作っています。
この時、ウィンドウ幅によって読み込む背景画像を変更するようにしたいと考えています。
端末を判別する形であれば、最初の発火自体を端末判別後にif文で振ってやればいいのですが、
ウィンドウのリサイズにも反応する形を求められています。

発生している問題・やってみたこと

他のJqueryスライドショー「nivoslider」や「bxSlider」では
発火するスクリプトを2回書くことで参照画像の上書きが可能だったため、
今回も同じものを2回書いたら上書きできるのではと考えてみたものの
駄目でした。

該当のソースコード

$(function() {
    $('#vegas').vegas({
					  delay: 10000,
        slides: [
            { src: 'common/images/mv_01.jpg' },
            { src: 'common/images/mv_02.jpg' },
            { src: 'common/images/mv_03.jpg' },
            { src: 'common/images/mv_04.jpg' },
            { src: 'common/images/mv_05.jpg' }
        ],
		overlay: 'common/js/vegas/overlays/07.png',
		transition: 'blur',
		transitionDuration :3000
    });
});


$(window).resize(function() {
wi = $(window).width();

if(wi <= 640){
$(function() {
    $('#vegas').vegas({
					  delay: 10000,
        slides: [
            { src: 'common/images/mv_01_sp.jpg' },
            { src: 'common/images/mv_02_sp.jpg' },
            { src: 'common/images/mv_03_sp.jpg' },
            { src: 'common/images/mv_04_sp.jpg' },
            { src: 'common/images/mv_05_sp.jpg' }
        ],
		overlay: 'common/js/vegas/overlays/07.png',
		transition: 'blur',
		transitionDuration :3000
    });
});
	
	};

});

どなたかご教授よろしくお願いいたします。

Answer 1

vegas.js は使ったことがないのですが、ドキュメントを見る限りオプションで slides を変更することができるようです。
具体的には、if(wi <= 640) の中の vegas を使っている部分を

$('#vegas').vegas('options', 'slides', [
	{ src: 'common/images/mv_01_sp.jpg' },
	{ src: 'common/images/mv_02_sp.jpg' },
	{ src: 'common/images/mv_03_sp.jpg' },
	{ src: 'common/images/mv_04_sp.jpg' },
	{ src: 'common/images/mv_05_sp.jpg' }
]);

に書き換えてみてください。

Comments

[Euri_K]

ありがとうございます。こちら、問題なく動作しました。
マニュアルには一通り目を通していたつもりですが見逃していたようです。
レスポンシブサイトに使えるかどうかという点で導入に躊躇っていたため大変助かりました。

そして、こちらは別の問題なのですが、
挙動としては表示候補の画像リストが変わるだけで、
今表示しているものは画像が変わらないようです。

そっちはそっちで解決する必要がありますが、
質問の主題とは異なるので一旦ベストアンサーとしてスレッドを終了します。
重ねて感謝いたします。