React-Slickでレスポンシブデザイン実装する方法を簡単に解説
投稿の趣旨
ポートフォリオサイトを作成する際にスライダーでReact-Slickを使用したのですが、React-Slickのレスポンシブに関する情報が少なくて僕自身困ったので、今回得た知見を投稿しようと思います
そのため、これはReact-Slickの網羅的な内容を解説する内容にはなっていません
React-Slickでの設定
import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
export default function SimpleSlider() {
const settings = {
dots: true, //スライダー下の点の表示/非表示
infinite: true, //無限スクロールの有効/無効
speed: 500, //スライド切り替えの速度
slidesToShow: 1, //一度に表示するスライド数
slidesToScroll: 1, //一度にスライドする枚数
};
return (
<Slider {...settings}>
<div>
<h3>Slide 1</h3>
</div>
<div>
<h3>Slide 2</h3>
</div>
<div>
<h3>Slide 3</h3>
</div>
<div>
<h3>Slide 4</h3>
</div>
<div>
<h3>Slide 5</h3>
</div>
</Slider>
);
}
上記は最も一般的なスライダーを作成するコードです
一般的にReact-Slickにおいては様々な設定をsettingオブジェクトで実装してきます
settingオブジェクトに書き込むことで、React-Slickに「一度に表示するスライド数」とか「スライドの動く速度」などの様々な設定をすることができます
レスポンシブの設定もその中の一つです
レスポンシブデザインの実装
ということで実際にsettingオブジェクトにレスポンシブの記載を書いていきます
下記のようにresponsiveというプロパティを追加して、値としてオブジェクトの入った配列を記載します
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
// settingに追加します!
responsive: [{}, {}, {}...]
};
このresponsiveの配列のオブジェクトがそれぞれのレスポンシブの基準とスタイルを表します
実際に例を見た方が分かりやすいかもしれません↓
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 4, //← デフォルトではこれ
slidesToScroll: 1,
// settingに追加します!
responsive: [
{
breakpoint: 1024, // 1024px以下の画面幅に対する設定
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 600, // 600px以下の画面幅に対する設定
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 480, // 480px以下の画面幅に対する設定
settings: {
slidesToShow: 1,
},
},
],
};
このように簡単なレスポンシブな設定を行いました
上記の例では、それぞれのレスポンシブオブジェクトでslidesToShowを設定することで、画面幅に応じて表示するスライドの数を変更しています
デフォルトでは4枚が表示されて、それぞれbreakpointのに達するとそのオブジェクト内の設定の枚数に変わっていきます(breakpointは数字だけでの入力で、単位はpx以外には対応していません)
slidesToShow以外にも、それぞれのレスポンシブに応じてほぼすべての設定を変更することができます
実際の使用例
実際にポートフォリオサイトでReact-Slickでを使いスライダーを作成しましたので、実際の動きなどの様子を見たい方はそちらを見てみてください↓
Discussion