1. HOME
  2. ブログ
  3. IT技術
  4. 【Next.js】React SlickのslidesToShowが少数でも、高さを動的にしたい

【Next.js】React SlickのslidesToShowが少数でも、高さを動的にしたい

今回はNextjsでReact Slickを改造していく記事です。

利用したバージョン

"react-slick": "^0.29.0"

React Slickとは

横スライドして表示を切り替えるやつです。

以下のコードから、

こんな感じの画面ができます。



全体像

最終的には以下のような画面を目指します。



adaptiveHeightを有効にする

実はSlick自身には高さを動的にしてくれる機能があり、それがadaptiveHeightです。
Sliderで現在表示している要素によって、Slider自身の高さを自動調整してくれるようになります。



slidesToShowに少数を指定する

slidesToShowは、1つの画面上に表示する要素の数を操作できる引数です。
なのでslidesToShowを1.5などの少数に変更した場合、Sliderの次の要素を少しだけ表示することが可能です。

しかし最後の要素を表示した時、以下のように高さが0になってしまったり、adaptiveHeightを有効にした場合に次の要素が不自然に隠れてしまいます。


ここをいい感じに表示できるよう改良していきましょう!

(slidesToShowがドキュメント上ではType: intってなってるので、少数だと動かなくて当然だろ!ってツッコミはナシで…)

原因

最後の要素を表示した時に高さが0になってしまう問題を探っていきましょう。

beforeChangeを利用して、スライド時のIndexを見ていきます。

最後のIndexだけ少数になっており、正常にSlider内の要素の配列から、取得できていないようです。
ちなみに、要素の数を増やしても最後のIndexだけ少数になり、本来のIndexからslidesToShowの少数部分がマイナスされた値になっているようです。

Indexをいい感じに補正した上で、Sliderの高さ調整を行なっていきましょう!

修正

Indexを補正する

こちらは単純に、Math.ceilを使って少数を切り上げて整数にしてあげるだけです。

Sliderの高さ調整を行う

まずはSliderの高さを変更した際、親からはみ出した箇所の表示を調整するcssを定義します。

次にPage側を変更しましょう。
まずはSliderにrefと、前に追加したcssを適用させます。

次にhooksを使って、Sliderの現在表示しているIndexが変更された場合に、refから取得したSliderの高さを変更します。

ちなみにChromeのDevツールなどで確認すると、以下のような構成になっているので、参考にしてみてください。

上記を実装した場合、以下のような表示になります。



他のタグと干渉しないような調整

ここからは好みですが、Sliderのドット表示や中身を他の要素に干渉させたくない場合などで以下を追加してみてください。

※Sliderのslick-dotsがposition: absoluteを持つため、Sliderをdivで囲っていますが、ドット自体が不要な場合はdivで囲わなくても同じような挙動になります。



まとめ

最終的なコードは以下になります。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア