はじめに
業務の中でreact-slickを使用する機会があったので
使用方法やオプションなどメモ代わりに書いていきたいと思います。
ユースケースは別で書こうと思います。
アジェンダ
- React Slickとは
- 導入
- 使用方法
- 個人的よく使うオプション
React Slickとは
react-slick/git-hub
React Slick Documentation
スライダーやカルーセルを簡単に実装でき、
レスポンシブ対応や豊富なオプションを使用できるのが特徴です
元々jQeryのプラグインであるSlickを
Reactでも使用できるようモジュール化したものになります。
導入
npmを使用する場合の導入までを公式から拝借。
パッケージのインストール
npm install react-slick --save
CSSをインストール
npm install slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
これで準備は整いました。
使用方法
ここでは画像3枚を配列に入れて使用しています。
settingsにオプションを指定し、Sliderに渡すだけで
簡単にカスタムすることができます。
import React from "react";
import Slider from "react-slick";
export default function SimpleSlider() {
const settings = {
dots: true,
infinite: true,
speed: 500,
};
const images = [image, image2, image3]
return (
<Slider {...settings}>
{images.map(img)=>
<div>
<img src={img} alt="pictuer" />
</div
}
</Slider>
);
}
個人的よく使うオプション
個人的によく使うオプションを中心に紹介します。
jQueryのSlickとは異なる部分もあるので注意が必要です。
なお主観で機能と見た目でオプションを分類しています。
機能に関するオプション
autoplay
スライドを自動再生します。
Type: bool
Default: false
infinite
コンテンツをループさせます(① -> ② -> ③ -> ① ...)
Type: bool
Default: true
initialSlide
最初に表示するスライドを指定します。
Type: int
Default: 0
lazyLoad
画像の読み込むタイミングを指定します。
progressiveは最初にまとめて、
ondemandは遅延読み込みをします。
Type: ondemand / progressive
Default: null
slidesToScroll
一度にスライドを何枚スクロールするか指定します。
Type: int
Default: 1
slidesToShow
フレーム内にスライドを何枚表示するかを指定します。
Type: int
Default: 1
speed
スクロール、フェードアニメーションの速度msで指定します。
Type: int
Default: 500
pauseOnHover
autoplayがtureの場合に
自動再生をマウスホバーで一時停止します。
Type: bool
Default: false
見た目に関するオプション
arrows
「前」「次」のスライドを操作する矢印を表示します。
Type: bool
Default: true
centerMode
現在表示しているスライドを中央に配置し、
次のスライドを少し見切れて表示させます。
Type: bool
Default: false
centerPadding
centerModeを指定した場合に
見切れて表示をさせる割合を指定します。
Type: string
Default: '50px'
customPaging
dotsがtrueの場合ドットナビをカスタムできます。
Type: func
Default: i => {i + 1}
dots
ドットナビを表示します。
Type: bool
Default: false
fade
スライドの切り替え方をフェードにします。
Type: bool
Default: false
nextArrow
arrowsがtureの場合に
「次」の矢印の見た目をHTMLでカスタムできます。
Type: html
Default: NEXT
prevArrow
arrowsがtureの場合に
「前」の矢印の見た目をHTMLでカスタムできます。
Type: html
Default: Previous
おわりに
カルーセルも一から実装しようと思うと手間ですが
Slickだと、とても簡単に実装できます。
最後まで、見ていただきありがとうございました。