EC-CUBEでトップページスライダーをレスポンシブ

レスポンシブ切り分け

スマホ768px以下（ファースト記述）
タブレット768px以上1000px以下
パソコン1000px以上

デフォルト

root/app/template/default/index.twig

<div class="ec-sliderRole">
    <div class="main_visual">
        <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp01.jpg') }}"></div>
        <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp02.jpg') }}"></div>
        <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp03.jpg') }}"></div>
    </div>
</div>

スマホ用画像を作成

スマホ用画像01.jpg（768px × 768px）
スマホ用画像02.jpg（768px × 768px）
スマホ用画像03.jpg（768px × 768px）

twig書き換え

root/app/template/default/index.twig

<div class="slider-pc">
    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp01.jpg') }}"></div>
        <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp02.jpg') }}"></div>
        <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_sp03.jpg') }}"></div>
        </div>
    </div>
</div>
<div class="slider-sp">
    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/スマホ用画像01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/スマホ用画像02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/スマホ用画像03.jpg') }}"></div>
        </div>
    </div>
</div>

CSS

root/html/user_data/assets/css/customize.css

/* スライダー
========================================================================== */
.slider-pc {
    visibility:hidden;
    height: 0;
}

/* レスポンシブータブレット768px以上1000px以下
   ========================================================================== */


@media only screen and (max-width: 1000px) and (min-width: 768px) {
        /* スライダー
    ========================================================================== */
    .slider-pc {
        visibility:visible;
        height: 450px;
    }
    
    .slider-sp {
        visibility:hidden;
        height: 0;
    }
}

/* レスポンシブーパソコン1000px以上
   ========================================================================== */


@media only screen and (min-width: 1000px) {
        /* スライダー
    ========================================================================== */
    .slider-pc {
        visibility:visible;
        height: 450px;
    }
    
    .slider-sp {
        visibility:hidden;
        height: 0;
    }
}