此範例將說明如何利用 Slideshow 元件來實現包含圖片、影片的輪播效果，完成此範例後即可獲得如下圖展示般的輪播應用。
使用 Canvas 轉換和 Slideshow 元件的差異：
Canvas | Slideshow |
可個別設定畫布不同的停留秒數 | 固定的切換秒數 |
每張 Canvas 畫布可額外新增其他元件豐富內容，例：連結動態資料的價目表、自動生成的折扣 QRcode 等 | 僅能使用圖片及影片的自動輪播 |
製作較費時，需從頭自行建立每張 Canvas 畫布 | 僅需設定好 Path 來源即可使用 |
可透過其他事件行為控制輸播，例：設定 OnPress 事件讓輪播變成點擊式切換 | 僅能依照設定的秒數輪播 |
🕐 此篇教學預計花費時間： 3～5 分鐘
〈事前準備〉
先準備好輪播及底圖的素材，以方便接下來的不同輪播作法使用。以下提供素材連結供大家下載。下載後請將 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 寬，背景顏色為白色
步驟二：「建立輪播素材連結變數」
切換回 MEDIA 頁籤，點擊輪播素材的 Slide1 右上方的 ［i］。
找到右側的 Original File URL 的 Link，點擊後複製網址。
切換回 APPLICATION，新增一組 Property BANK［slide1］ ，選擇 Type 為 String，並在 Value 欄位中貼上 Slide 1 的網址。
重覆 1～3 ，將 Slide2 及 Slide3 都轉換成 Property 變數。
步驟三：「建立並設定 Slideshow Path」
從 Canvas 右側［＋］新增選擇［Slideshow］元件
點擊 Slideshow 元件的 Paths 屬性，選擇 ［New Item］ 建立一組輪播內容
選擇 url 後按 ［＋］，接著點擊左方鏈結後選擇 ［slide1］的變數
再來請選擇 mediaType ，按［＋］後依照選擇 slide1 的類型選擇 photo。
剩餘兩組 slide2 和 slide3 則依照類型繼續完成設定即可。
步驟三：「設定輪播時間及淡入動畫長度」
基本上 Slideshow 元件在 Paths 設定完成後就會以預設的 2秒一張的速度自動輪播，但若需要有淡入動畫以及調整更長的輪播時間時，都可以在 Slideshow 的 Properties 中設定。
Countdown ：每張輪播內容的停留秒數，這裡可以保留 2 秒的預設值，或是可依照喜好做調整。
Loop：設定是否要讓輪播會循環播放，預設為 Yes。
Fade Duration：設定照片淡入動畫的時間，這裡我們設定成 800 和前一範例的效果一致。
＊關於 Slideshow 各屬性定義可進入 輪播器 - Slideshow 元件 中查看詳細說明。
步驟四：「播放觀看效果」
調整好屬性後即可點擊預覽播放查看效果，是不是和前一個 Canvas 製作的自動輪播效果一樣，但花費的時間卻減少了一大半？想快速建立圖片、影片的輪播就可以使用這個元件。
恭喜你完成了以 Slideshow 元件為基礎的自動輪播。
下一節範例將帶你製作使用 MediaFlow 搭配 Slideshow 製作的自動檔案更新的自動輪播範例。
若需要任何幫助，歡迎點擊右下角的對話圖示詢問，我們會盡快回覆您的問題