這次範例的完成品如下。

上半部份是幻燈片的部份，圖片的部份用的是外部連結。可以設定自動撥放。
幻燈片的部份也可以點擊，點擊不同的幻燈片之後，在下方會連結到不同的網站。

畫面編排的部份如下。

要用這個外掛的話，我們必需拉一個 horizontal scroll arrangement水平捲動配置進來。
另外，放了一個 web元件，用來取 google sheet上的資料。
web viewer，用來顯示點擊幻燈片後，連結到的網頁用。

這裡用的 6個圖片，是放在 google sheet上，像下面這樣。

b欄放的就是圖片的連結網址。
要從 google sheet中取得資料，這裡用 web元件來做。作法請參考。
怎麼從google sheet中取得資料

全部的程式碼如下。

第 1部份的程式碼說明。

建立變數_全部資料，用來取 google sheet上的資料，它的值是一個空清單。

第 2部份的程式碼說明。

when screen 1.initialize程式初始化的時候。
set web 1.url設定 web元件的網址為 google sheet的表單連結。這部份請參考：
怎麼從google sheet中取得資料

call web 1.get呼叫網路元件取得資料。
set colintreeslideshow 1.auto scroll enabled，設定幻燈片自動撥放。
set colintreeslideshow 1.drag threshold，這個我不知道是什麼。
set colintreeslideshow 1.scroll right ward，設定幻燈向右捲動。
set colintreeslideshow 1.time interval，設定幻燈片 2秒換下一張

第 3部份的程式碼說明。

when web 1.gottext，當網路元件取得資料之後。
把變數_全部資料，設定成 list from csv table從 csv的表格轉成列表。text的就放 get response content。

call colin tree slides show 1.register scroll view，設定這個外掛套用到 horizontal scroll arrangement 1水平捲動配置 1。
這樣的話，幻燈片才會生效。

call colin tree slides show 1.add pohto，呼叫外掛，把圖片加入到幻燈片中。
path放的就是圖片的連結，或是路徑。

第 4部份的程式碼說明。

這一個只是我在確認幻燈片有沒有正常作用。
可以不用放。

第 5部份的程式碼說明。

when colin tree slides show 1.slide click當幻燈片的圖片被點擊的時候。
slide index這個參數，指的是當下的圖片是在全部圖片的第幾張。

set lable 2.text標籤 2的文字設定成 slide index。這是為了確認點擊到的圖片是全部圖片中的第幾張，實際上在用的時候，可以不用放。

加入流程判斷。
如果 slide index的值等於 1、2、3、4……的時候，把 webviewer的網址設定不同的網址，call web view 1.go to url再呼叫瀏覽器元件，前往我們設定好的網址。

這次的 aia檔的下載連結如下:
NO_141_Slideshow.aia

APP INVENTOR外掛
名稱：ColinTreeSlideShow
外掛來源：aix.colintree.cn
外掛載點：
https://aix.colintree.cn/en/extensions/ColinTreeSlideShow.html#download

參考書籍請見博客來書籍介紹頁面：
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC＋創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單：App Inventor 2初學特訓班
手機應用程式設計超簡單：App Inventor 2小專題特訓班
手機應用程式設計超簡單：App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄，都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面