カスタム投稿とカスタムフィールドでメンバーズリストを作る《掲載5》

トップページにもメンバーズリストを表示させるため、通常のloop以外に、カスタム投稿用のloopを追加します。

カルーセルを実装してレイアウトしてみます。

という訳で、カルーセルの中でも特に評判のいい「slick」を使用してみます。

slickは以下からダウロードしてください。
https://github.com/kenwheeler/slick/

slickの説明は

(英語)

slickの設定をheader.phpに追記

jQuery('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 5,
  slidesToScroll: 5,
  responsive: [
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

breakpointは600と480でセットし、それぞれ写真を3枚、2枚を表示させるようにしました。
ここらへんの数値はお好みで