此範例將說明如何利用 Canvas 畫布的切換來實現包含圖片、影片的輪播效果，完成此範例後即可獲得如下圖展示般的輪播應用。
🕐 此篇教學預計花費時間： 6～8 分鐘
完整步驟教學影片：
〈事前準備〉
先準備好輪播及底圖的素材，以方便接下來的不同輪播作法使用。以下提供素材連結供大家下載。下載後請將 BG 及 Slide 1～5 分開 Media 的 Box 上傳放置。
步驟一：「建立 Application 及基本版面」
下圖是步驟一準備建立的基本版面，附上相關尺寸及顏色資訊方便大家快速建立
底版圖片：滿版 96 X 54，BG.jpeg
輪播區方塊 - SlideBG：59 X 42，Border Width 1，Background Color #FFFFFF
輪播 Image：57 X 40，Slide 1-5.jpeg/mp4。
詳細操作步驟如下
先建立應用程式 CanvasSlide
接著建立一個滿版的 Image 圖片元件，並選擇素材中的 BG.jpeg。
新增輪播區的方塊，設定邊框為 1 Pixel 寬，背景顏色為白色
步驟二：「新增輪播圖片」
新增一個 Image Brick 元件，選擇檔案為 Slide1.jpeg
設定 Resized Mode 為 Cover，使其滿版
接著設定 Standby Opacity 為 0，使其在 Canvas 進場時會從透明度 0 開始 Fade-In。
將 Standby Delay 設定為 300 ms，使其延遲0.3秒才開始 Fade-In。
設定 Standby Easing 中的 default easing 秒數為 800ms，將 Fade-In 的秒數延長為 0.8 秒。
步驟三：「建立輪播用的另外2個 Canvas」
由於要輪播的圖片和影片還有各一個，因此我們要透過複製 Canvas 畫布的方式來快速建立另外兩個 Canvas 畫布。
［Duplicate Canvas］：
請先選擇預設的 Canvas 1 後，選擇右側屬性最下方的 Duplicate (Keep Brick references) 複製出新的 Canvas 畫布，重新命名後就可以獲得另一個和 Canvas 1 一樣內容的畫布。
［Copy Image Brick］：
接著要將原來的 slide1 圖片元件透過 Copy 的方式複製出來我們要建立的 slide2，並更換 Path 連結至 slide2 的 PropertyBank 變數連結後，刪除 Canvas 2 中的 slide1，因為我們不需要在 Canvas 2 中還看到 slide1 的圖片，記得選擇 [Remove this Brick in the canvas ]，才不會連 Canvas 1 中的 slide1 也一起刪除。
＊為什麼不直接修改 Canvas 2 中的 slide1 元件？因為透過 Duplicate 產出畫布中的元件基本上和 Canvas 1 是同一個元件，也因此需要透過 Copy 來建立出新的元件並保留曾經設定好的屬性。
［Change Brick Template to Video］：
然後我們再重覆一次 Duplicate 創建出 Canvas 3，在 Copy slide2 後，記得將 slide3 的 Template 換成 video，這樣才能順利的播放出影片。
步驟四：「建立輪播動態」
在上一步驟後，建立出來的 Canvas 畫布並不會自動的切換，我們必須要透過 Canvas 上的 Properties 來實現固定時間切換。
請選擇 Showing Timeout 來設定停留在此 Canvas 畫布的時間，這裡我們設定成 3000ms。
接著在 Next Canvas ID 的選項中指定下一張 Canvas 的名稱，指定好下一張 Canvas 畫布後，在預覽就可以看到 2秒後切換至該張畫布的動態。
那 Canvas 3 的影片怎麼辦？需要計算影片秒數填在 Showing Timeout 嗎？
當然沒有這麼麻煩，BRICKS 有提供影片播放完畢的事件，讓輪播的設定更順暢。
在 Video 元件的 Events 下有個 Round End 的事件，該事件為影片播放完畢後觸發。因此可選擇該事件，並新增一組 CHANGE CANVAS的事件，指定變更的 Canvas ID 為 Canvas 1 後即可完成循環輪播的範例。
恭喜你完成了以 Canvas 為基礎的自動輪播。
下一節範例將帶你製作使用 Slideshow 元件製作的自動輪播。
若需要任何幫助，歡迎點擊右下角的對話圖示詢問，我們會盡快回覆您的問題