越境ECセミナー
随時開催中!!

❯❯❯ 低コスト・低リスクでグローバル展開!
「アジア越境ECの補助金・助成金プラン」
はこちら

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

Reactで使えるスライダー、React Slickのご紹介

テクニック

jQeury用スライダーのプラグインとして、Slickを使ったことがある方は多いと思いますが、
React版のSlickが存在していることを知りましたので、ご紹介いたします。

公式サイト

使い方は、おそらくjQuery版よりも簡単です。

作ってみたもの
DEMO

Reactを使っている環境で、

または

を実行してインストール。

Slickを設置したいコンポーネントの入ったJS(TS)ファイルなどで、モジュールを呼び出します。

CSSはjQuery版のSlickから流用するようですね。
以下のようにslick-carouselのCSSを読み込み

そして、スライダーにしたい要素を<Slider>で囲みます。
設定はsettingsにjQuery版と同様の設定を行い、<Slider {…settings}> のようにスライダーのコンポーネントに渡します。

Reactを使う時に、スライダーが少し不安でしたが、このことを知って安心しました。

この記事を書いた人
LaunchCart.jpのアイコン

LaunchCart.jp

LaunchCart.jp運営