[js]vegas.jsでレスポンシブ画像切り替え

簡単。めっちゃ簡単。

参考
例えばこうなる

参考

公式に書いてる。

Methods - Documentation - Vegas Background SlideShow

例えばこうなる

$(function(){
    //初期設定
    $('#vegas').vegas({
        slides:[
            {src: 'img/img01.jpg'},
            {src: 'img/img02.jpg'},
            {src: 'img/img03.jpg'},
        ],
        delay:15000,
        timer: false,
        transition: 'blur',
        transitionDuration: 2000,
        animation: 'kenburns',
        animationDuration: 20000,
    })
    //レスポンシブ
    $(window).on('load resize',function(){
        if(window.matchMedia('(max-width:767.98px)').matches){
            if(!$('#vegas').hasClass('sp')){
                $('#vegas').vegas('options', 'slides', [
                    {src: 'img/img01_sp.jpg'},
                    {src: 'img/img02_sp.jpg'},
                    {src: 'img/img03_sp.jpg'},
                        ]);
                $('#vegas').addClass('sp');
            }
        }else{
            if($('#vegas').hasClass('sp')){
                $('#vegas').vegas('options', 'slides', [
                    {src: 'img/img01.jpg'},
                    {src: 'img/img02.jpg'},
                    {src: 'img/img03.jpg'},
                ]);
                $('#vegas').removeClass('sp');
            }
        }
    })
})

optionsを指定すれば該当部分だけ上書きして更新してくれる。すごく助かる。

注意すべきはvegas側よりも自分の組み方。

スマホだと無視できるけどPCを考慮するとブラウザ幅取得からの条件分岐はこんな感じに、一定数より小さい状態で.spが付いてなかったら画像を切り替えて.spを付与する、大きい状態ならその逆、でやっていくのが無難かなと思う。