React 輪播圖套件 React Slick 新手教學

material ui 框架沒有提供輪播圖 component，需要另外安裝套件，這邊介紹一個我常用的套件 React Slick，剛好他也有出 react 版本。

安裝套件

安裝方式可以參考官網

$ yarn add react-slick
$ yarn add slick-carousel

引入css

可以在單獨頁面引入，也可以在index.js引入，這樣每個頁面都可以使用。

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

在頁面中使用

在你要放輪播圖的頁面放入以下程式碼：

import Slider from "react-slick";

const settings = {
    dots: true,
    speed: 500,
    slidesToShow: 1,  // 一次顯示幾張
    slidesToScroll: 1, // 按下一頁的時候，要跑幾張
  };

<Slider {...settings}>
  <div>
    <img src="..." />
  </div>
  <div>
    <img src="..." />
  </div>
  <div>
    <img src="..." />
  </div>
</Slider>

slidesToShow 這邊的數字如果你設定 1 以上，就可以做到這種效果：

官網也有提供很多範例，基本上就是修改setting這個物件的選項而已。

https://react-slick.neostack.com/docs/example/simple-slider