Reactで使えるスライダー、React Slickのご紹介
jQeury用スライダーのプラグインとして、Slickを使ったことがある方は多いと思いますが、
React版のSlickが存在していることを知りましたので、ご紹介いたします。
使い方は、おそらくjQuery版よりも簡単です。
作ってみたもの
DEMO
Reactを使っている環境で、
|
1 |
npm install react-slick slick-carousel --save |
または
|
1 |
yarn add react-slick |
を実行してインストール。
Slickを設置したいコンポーネントの入ったJS(TS)ファイルなどで、モジュールを呼び出します。
|
1 |
import Slick from "react-slick"; |
CSSはjQuery版のSlickから流用するようですね。
以下のようにslick-carouselのCSSを読み込み
|
1 2 |
import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; |
そして、スライダーにしたい要素を<Slider>で囲みます。
設定はsettingsにjQuery版と同様の設定を行い、<Slider {…settings}> のようにスライダーのコンポーネントに渡します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function Slider() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <ul className="slider"> <Slick {...settings}> <li><img src="img/1.jpg" alt="Sample Image"/></li> <li><img src="img/2.jpg" alt="Sample Image"/></li> <li><img src="img/3.jpg" alt="Sample Image"/></li> <li><img src="img/4.jpg" alt="Sample Image"/></li> <li><img src="img/5.jpg" alt="Sample Image"/></li> </Slick> </ul> ); } |
Reactを使う時に、スライダーが少し不安でしたが、このことを知って安心しました。
