ReactJS - 輪播圖

React 透過第三方 UI 元件庫提供輪播圖元件。React 社群提供了大量的 UI/UX 元件，選擇合適的庫來滿足我們的需求是比較困難的。Bootstrap UI 庫是開發人員的熱門選擇之一，並且被廣泛使用。React Bootstrap（https://react-bootstrap.github.io/）已將幾乎所有 Bootstrap UI 元件移植到 React 庫中，並且對輪播圖元件也具有最佳的支援。

讓我們在本節學習如何使用react-bootstrap庫中的輪播圖元件。

什麼是輪播圖？

輪播圖基本上是一個幻燈片，它迴圈播放一系列內容，並具有豐富的動畫支援。它接受一系列影像作為其主要內容。它還接受每個幻燈片的標題內容。它具有按鈕/指示器，可以從當前內容導航到下一個/上一個內容。暫停和顯示內容的時間長度可以根據需要進行配置。

Carousel 元件

Carousel 元件允許開發人員在 Web 應用程式中使用 Bootstrap 設計建立簡單的輪播圖。Carousel 元件接受兩個元件：

Carousel.Item

Carousel 元件接受多個Carousel.Item專案。每個 Carousel.Items 都是一個幻燈片，可以接受一個影像。示例程式碼如下：

<Carousel>
   <Carousel.Item>
      <img
         className="d-block w-100"
         src="react_bootstrap_carousel_slide1.png"
         alt="First slide"
      />
   </Carousel.Item>
   <Carousel.Item>
      <img
         className="d-block w-100"
         src="react_bootstrap_carousel_slide2.png"
         alt="Second slide"
      />
   </Carousel.Item>
</Carousel>

Carousel.Caption

Carousel.Caption是一個特殊的元件，用於顯示關於幻燈片的簡短描述，它應該包含在Carousel.Item元件內。示例程式碼如下：

<Carousel.Item>
   <img
      className="d-block w-100"
      src="react_bootstrap_carousel_slide1.png"
      alt="First slide"
   />
   <Carousel.Caption>
      <h3>React Bootstrap</h3>
      <p>React component library providing bootstrap components</p>
   </Carousel.Caption>
</Carousel.Item>

Carousel 元件接受少量 props 來配置功能，它們如下所示：

controls (布林值)
啟用/停用控制元件，例如上一個/下一個按鈕
keyboard (布林值)
啟用鍵盤控制
touch (布林值)
啟用/停用觸控控制
indicators (布林值)
啟用/停用輪播圖底部的指示器
nextIcon (React 節點)
自定義下一個圖示的選項
nextLabel (字串)
自定義下一個標籤的選項
prevIcon (React 節點)
自定義上一個圖示的選項
prevLabel (字串)
自定義上一個標籤的選項
interval (數字)
兩個幻燈片之間暫停和播放的時間長度
activeIndex (數字)
表示要顯示的幻燈片的索引號
slide (布林值)
啟用/停用自動幻燈片功能
variant (dark)
啟用輪播圖設計的不同變體。dark 選項將輪播圖主題從淺色更改為深色
bsPrefix (字串)
用於自定義底層 CSS 類的字首
onSelect (函式)
啟用附加函式以處理 onSelect 事件
onSlide (函式)
啟用附加函式以處理 onSlide 事件

Carousel.Item 元件接受一些 props 來配置功能，它們如下所示：

interval (數字)
單個幻燈片暫停的時間長度
bsPrefix (字串)
用於自定義底層 CSS 類的字首

應用Carousel元件

首先，建立一個新的 React 應用程式，並使用以下命令啟動它。

create-react-app myapp
cd myapp
npm start

接下來，使用以下命令安裝 bootstrap 和 react-bootstrap 庫：

npm install --save bootstrap react-bootstrap

接下來，建立一個簡單的輪播圖元件，SimpleCarousel (src/Components/SimpleCarousel.js)，並渲染一個輪播圖，如下所示：

import { Carousel } from 'react-bootstrap';
function SimpleCarousel() {
   return (
      <Carousel fade indicators={false} controls={false}>
         <Carousel.Item>
            <img
               className="d-block w-100"
               src="react_bootstrap_carousel_slide1.png"
               alt="First slide"
            />
            <Carousel.Caption>
               <h3>React Bootstrap</h3>
               <p>React component library providing bootstrap components</p>
            </Carousel.Caption>
         </Carousel.Item>
         <Carousel.Item>
            <img
               className="d-block w-100"
               src="react_bootstrap_carousel_slide2.png"
               alt="Second slide"
            />
            <Carousel.Caption>
               <h3>Button</h3>
               <p>React Bootstrap button component</p>
            </Carousel.Caption>
         </Carousel.Item>
         <Carousel.Item>
            <img
               className="d-block w-100"
               src="react_bootstrap_carousel_slide3.png"
               alt="Third slide"
            />
            <Carousel.Caption>
               <h3>Carousel</h3>
               <p>React bootstrap Carousel component</p>
            </Carousel.Caption>
         </Carousel.Item>
      </Carousel>
   );
}
export default SimpleCarousel;

這裡：

匯入了 Carousel 元件並添加了一個 Carousel 元件。
在 Carousel 元件中使用了 fade props 來更改動畫型別
在 Carousel 元件中使用了 indicators props 來移除指示器
在 Carousel 元件中使用了 controls props 來移除控制元件
添加了三個 Carousel.Item 專案並使用了三個影像。
在每個 Carousel.Item 元件中添加了 Carousel.Caption 併為每個幻燈片設定了標題。

接下來，開啟App.css (src/App.css) 並移除所有樣式。

// remove all default styles

接下來，開啟 App 元件 (src/App.js)，匯入 bootstrap css 並使用我們的新輪播圖元件更新內容，如下所示：

import './App.css'
import "bootstrap/dist/css/bootstrap.min.css";
import SimpleCarousel from './Components/SimpleCarousel'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div style={{ width: "400px", height: "400px", backgroundColor: "skyblue" }}>
               <SimpleCarousel />
            </div>
         </div>
      </div>
   );
}
export default App;

這裡：

使用import語句匯入了 bootstrap 類
渲染了我們的新SimpleCarousel元件。
包含了 App.css 樣式

最後，在瀏覽器中開啟應用程式並檢查最終結果。輪播圖元件將如下所示：

新增控制元件和指示器

讓我們更新我們的元件以包括控制元件來導航到下一個和上一個幻燈片，以及指示器來標識當前幻燈片的位置。

首先，開啟我們的輪播圖應用程式並更新SimpleCarousel元件，如下所示：

import { Carousel } from 'react-bootstrap';
function SimpleCarousel() {
   return (
      <Carousel fade indicators={true} controls={true}>
      <Carousel.Item>
      // ...

這裡：

使用了indicators props 來啟用指示器
使用了controls props 來啟用控制元件

接下來，在瀏覽器中開啟應用程式並檢查最終結果。輪播圖元件將帶有控制元件和指示器如下所示：

總結

React-bootstrap Carousel 元件提供了建立簡潔易用的輪播圖元件所需的所有選項。

列印頁面