Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】

以前書いたslickの記事が比較的に読んでいただけているようなので、調子に乗ってもう一つ書きます。

前回記事
レスポンシブWebデザインに対応!Slick.jsを使ってスライドの サムネイルの位置を切り替える

160423blog

 

現在(2016年4月)弊社では求人を募集していまして、求人ページを作った時に使ったパターンです。
→ この個所(INTERVIEW)です

今回はカルーセルスライダーで、真ん中の写真だけちょっと拡大させて見せるやつです。
カルーセルスライダーでたくさん写真があるぞっていうのを示しておいて、その中でウェイトを付けてあげることで目を引いてもらうパターンですね。
公式のサンプルの中のセンターモードで紹介されているやつ何ですが、普通にセンターモードにするだけだとこうならないし、特に公式では拡大させる方法が紹介されていないんですよね。※見つけられていないだけかもしれません…

ということで求人ページのやつをもう少しシンプルにしたデモを作ってみました。

【DEMO】


HTML




.containerはmax-width: 960px;で画面のセンターに寄せている、個人的に使っているクラスなので無視してください。
あとは比較的普通です。

Javascript




Javascriptで大事なところは、

  • centerModeをtrueに設定すること。
  • slidesToShowは奇数にすること。
  • centerPaddingで画像間の余白の調整

になると思います。

CSS




ちょっと長いですけど、拡大させるのに重要なポイントは



ここだけなんですよね。slickの場合、センターモードにすると、currentスライダーがセンターになり、.slick-currentが付与されるので、.slick-currentの中の画像のscaleを大きくしてあげています。
さらにslick側で用意する.slick-listにoverflow: hidden;がslick.cssで設定されていて拡大したときに画像が見切れてしまうので、overflow: visible;にするか、paddingで上下に余白をとってあげれば大丈夫です。

基本的にはこれで何とかなると思います。
画面いっぱい画像を並べるのであれば、.containerではなくてwidth: 100%;にしてカルーセルスライダーを画面のセンターに絶対配置してあげるとよいと思います。
あとは大きさや画像ふちを付けたり、影を付けたりと装飾して見た目を整えます。

slick使いやすくて好きです。前回のとはちょっと毛色が違いますが、こんな使い方もできますね。(というか、こちらの方がslickっぽいですね)
ほかにもこんなことできたーとか出てきたらまた紹介しますね。
もしくはこんなんはできないのか?ってのがあれば、挑戦してみますのでコメントください。

というわけで、弊社ではただいま求人募集中です。

求人募集中





※この情報は2016年4月現在の情報です。詳しくはアートグラフィック新潟Webサイトよりお問い合わせください。


コメントを残す

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