react 輪播圖套件

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

0

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

加入Line立即聊聊:@539mjyid

0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。