おすすめ商品をサイト上に掲載したいとなったとき、掲載数が多いと場所を占領します。スマホで見た時はページがさらに縦に長くなります。そんなときはスライダーにして、1列に収めてしまいましょう。PC幅とスマホ幅で1列の表示数を変更することも可能です。

カルーセルでも使われているjQueryのslickプラグインを使います。
デフォルトでCDNが記述してあるので、追加で記述する必要がありません。

以下、商品系ブロックの基本的HTMLを元に実施します。

①ulのclassに新しいclassを追加します。（例：recommend_list）

※「ec-shelfGrid」のclassを使用すると、ブロックの配置位置によっては商品一覧もスライダー化してしまうので基本別classにすることをおすすめします。

 

<div class="ec-shelfRole">

　<ul class="ec-shelfGrid recommend_list">

　　　<li class="ec-shelfGrid__item">

　　　　　　………

　　　</li>

   </ul>

</div>

②ブロック内にコードを記述します。

slickの（）内には先ほど追加したclassを記載します。

例：

 

{% block javascript %}

<script>

$(function() {

    $('.recommend_list').slick({

        dots: false,

        arrows: true,

        autoplay: false,

        infinite: false,

        speed: 300,

        slidesToShow: 5,

        slidesToScroll: 5,

        accessibility: true,

        prevArrow: '<div class="slider-arrow prev-arrow"></div>',

        nextArrow: '<div class="slider-arrow next-arrow"></div>',

        responsive: [

            {

                breakpoint: 768,

                settings: {

                    dots: true,

                    slidesToShow: 2,

                    slidesToScroll: 2,

                }

            }

        ]

    });

});

</script>

{% endblock javascript %}

slickにはいろんなオプションがありますが、上記で設定しているのは以下です。

dots: false…スライド下のドットを表示するか：しない（true:する）
arrows: true…スライドの左右の矢印ボタンを表示するか：する
autoplay: false…自動再生を有効にするか：しない
infinite: false…スライドのループを有効にするか：しない
speed: 300…スライドの速度：300
slidesToShow: 5… 1列に表示するスライド数：5
slidesToScroll: 5…一度にスクロールするスライド数：5
accessibility: true…タブと矢印キーのナビゲーションを有効にするか：する
prevArrow…左の矢印ボタンのHTMLを記載。
nextArrow…右の矢印ボタンのHTMLを記載。

arrows: true をすると、デフォルトの矢印用のボタンが表示されます。

こちらにデザインを適用してもいいですが、prevArrowとnextArrowを使って別のHTMLタグに置き換えることも可能です。
※例ではボタン用の画像をbackground-imageで表示しています。HTMLの中にimgタグを入れて画像を表示することも可能です。


レスポンシブサイト等でタブレット・スマホ表示時に切り替えたい設定部分がある場合はresponsiveを使ってブレイクポイントを指定します。設定していない部分はPCと共通です。複数のブレイクポイントを指定することも可能です。

 

responsive: [

            {

                breakpoint: 1024,

                settings:{

                    dots: true,

                    slidesToShow: 3,

                    slidesToScroll: 3,

                }

            },

            {

                breakpoint: 768,

                settings: {

                    dots: true,

                    slidesToShow: 2,

                    slidesToScroll: 2,

                }

            }

 ]

breakpoint: 1024


breakpoint: 768

③scss・css等でデザイン調整を行ってスライダー化完了です

スマホ版の場合、スライドした際に一部商品画像同士がくっついてしまうため、調整が必要となります。


デフォルトのscssの指定ではデスクトップ以下の表示の場合、片方にしかpaddingがありません。

 

.ec-shelfGrid{

    & &__item:nth-child(odd){

           padding-right: 8px;

           @include media_desktop(){

                 padding: 0 16px;

           }

    }

    & &__item:nth-child(even){

            padding-left: 8px;

            @include media_desktop(){

                  padding: 0 16px;

            }

    }

}

この場合、nth-child(odd)もnth-child(even)も「padding： 0 10px;」等にして左右に余白を設けると画像の間に余白ができます。

※.ec-shelfGridのscssを触ると商品一覧にも影響が出るので、商品一覧に影響させないようにする場合、ブロック専用のidやclassを設け、scssが他に適用されないように対応してください。

例：

 

#recommend_block{

      .ec-shelfGrid{

              & &__item:nth-child(odd){

                      padding: 0 10px;

                      @include media_desktop(){

                            padding: 0 10px;

                      }

              }

              & &__item:nth-child(even){

                       padding: 0 10px;

                       @include media_desktop(){

                             padding: 0 10px;

                       }

              }

       }

}

スライダー化すると画面がとてもすっきりします。
スマホのみスライダーを有効にしたり、またその逆も可能です。slickにはいろいろな機能があるので、是非調べて色々試してみてください。