1. 首頁
  2. »
  3. 免費
  4. »
  5. Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時支援手指左右滾動

Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時支援手指左右滾動

2022/03/24

梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
  前幾天分享了Google協作平台的自訂原始碼與域名的綁定功能,大家對於Google協作平台是否也已改觀,而先前梅干只嵌入CSS與HTML的標籤語法,今天梅干則試著嵌入Javascript看看,便找了一個jQuery的圖片輪播模組,雖然Google協作平台也已內建圖片輪播。

但功能有些陽春,且不支援手指左右滾動,這對於現在人而言,幾乎用手機瀏覽網頁的比例比桌機高許多,因此用手指左右滑動畫面,也已相當的習慣,因此接下來梅干則試著將swiperjs的圖像輪播模組,嵌入Google協作平台中,同時還嵌入圖片,至於要怎麼做,有興趣的朋友也一塊來看看囉!


Swiper
連結網址:https://swiperjs.com/

Step1
首先進到Swiper這個模組後,在Demos的展示頁面中,尋找喜歡的輪播效果。
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step2
找到後,點上方的Core
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step3
接著分別把CSS、HTML、Javascript的碼全部拷貝起來。
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step4
回到Google的協作平台,點一下「內嵌」再切到嵌入程式碼,將剛剛的碼貼入。
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step5
再按下一步後,就會看到剛所嵌入的結果畫面,接著再按插入
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step6
插入後,再將畫面左右拉到最大,由於範例只有文字,所以畫面中,只會出現剛所貼上的文字訊息。
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step7
這時先將照片上傳到Google雲端硬碟中,再將等下要插入輪播的圖片,先插入頁面中。
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step8
插入後按預覽,再對著圖片按滑鼠右鍵,選擇複製圖片位置
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step9
複製好後,回到Google協作平台的編輯模式,並進到嵌入網頁內容的輸入框中,將剛剛的文字替換成img標籤後,再把剛剛的圖片路徑貼上。
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step10
都修改完畢後,再按下一個時,就可即時預覽結果畫面,沒問題後再按儲存
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
Step11
這時不但輪播圖片支援RWD以外,甚至還支援手指或滑左右滾動,這樣比較符合目前的操控習慣,因此有在用Google協作平台的朋友,不妨也可試試看,嵌入Swiper的輪播套件看看吧!
梅問題-Google協作平台,也可嵌入第三方圖像輪播模組Swiper,同時還支援手指左右滾動
#範例預覽:https://sites.google.com/view/7cha-swiper/%E9%A6%96%E9%A0%81


延伸文章