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

トップページにもメンバーズリストを表示させるため、通常のloop以外に、カスタム投稿用のloopを追加します。
カルーセルを実装してレイアウトしてみます。
という訳で、カルーセルの中でも特に評判のいい「slick」を使用してみます。
slickは以下からダウロードしてください。
https://github.com/kenwheeler/slick/
slickの説明は
http://kenwheeler.github.io/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枚を表示させるようにしました。
ここらへんの数値はお好みで

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です