目次
はじめに
Gatsby.js プロジェクトにスライダーを実装する際に React Slick というものがあり、非常に簡単に導入できて便利でしたので簡単に紹介します。 ※当記事は Gatsby.js に実装する前提の内容になります
Gatsby.js は React ベースで作られていますので、React Slick に限らず他の React ライブラリも利用することができます。
jQuery slick の React 版ですので、jQuery slick を扱っていた方はより簡単に利用できるかと思います。
React Slick 公式サイト
実装サンプル
この記事では必要最低限の実装しかしていませんが、約 29 種類の実装パターンがあるので興味ある方は公式サイトの方も参考にしてみて下さい。
パッケージのインストール
npm でパッケージが公開されているので、必要なパッケージをインストールします。
$ npm install react-slick
$ npm install slick-carousel実装
Gatsby.js は /gatsby-browser.js ファイルにスタイル関係は記述しないと反映されないので、React Slick で利用する CSS を記述します。
gatsby-browser.js
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"スライダー用のコンポーネントを作ります。
ファイル名・ファイル配置はご自身の環境に応じて適宜変更して下さい。
src/components/react-slick.js
import React, { Component } from "react";
import Slider from "react-slick";
export default class SlickSlider extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<>
<Slider {...settings}>
<figure>
<img
src="https://fakeimg.pl/350x200/?text=Slider1&font=lobster"
alt="/"
/>
</figure>
<figure>
<img
src="https://fakeimg.pl/350x200/?text=Slider2&font=lobster"
alt="/"
/>
</figure>
<figure>
<img
src="https://fakeimg.pl/350x200/?text=Slider3&font=lobster"
alt="/"
/>
</figure>
</Slider>
</>
);
}
}ページでスライダーコンポーネントを読み込みます。
import React from "react";
import SlickSlider from "../components/react-slick";
export default function Home() {
return (
<div>
<h1>React Slick</h1>
<SlickSlider />
</div>
);
}以上で簡単にスライダーが実装できました。（以下実際に動きます）
基本的に以下のハイライトが当たっている箇所を変更して、色々なパターンの実装をすることができます。
export default class SlickSlider extends Component {
render() {
const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, }; return (
// ...
);
}
}参考サイト
SHARE
