第二部 -參數調整
在網頁上加上 Swiper 輪播效果，提升產品曝光率，讓頁面美觀呈現的小技巧。本篇將介紹實用的參數設定，客製化調整你要的效果吧! 🏃
Swiper 網址
插件載入步驟參閱 👉第一部-環境建立
part 1. 進入 Swiper API
按照網站提供的範例，等一下要添加、修改的參數都必須放在紅框的位置。
在API裡可以看到所有可調整的參數。將要調整的"參數名稱及數值"，按照範例公式寫進JavaScript。
要注意數值的類型(布林、數字、字串)。如果是字串，必須要填入"參數描述"內指定的字串內容。(如下圖，'horizontal' or'vertical')
part 2. 常用參數設定整理
◉ direction播放方向 : 圖片播放方向。 [ 填入 “vertical”(垂直) 或 “horizontal (水平)” ]
◉ speed轉場速度 : 圖片轉場速度。 [ 填入數字 (單位:毫秒) ]
◉ autoHeight自適應高度 : 在 true 模式下，每張圖片會依照本身高度呈現，而不會固定在統一高度。[ 填入 true 或 false ]
◉ effect轉場效果 : 圖片轉場效果。[ 填入 “slide” (滑動)、’”fade” (淡出淡入)、 “cube” (轉動方塊)、 “coverflow” (插入) 、 “flip” (旋轉門)
◉ spaceBetween圖片間距 : 轉場時，圖片之間的距離。 [ 填入 數字 (單位:px) ]
◉ allowTouchMove手動切換 : false模式為關閉手動操作。無法用點擊或拖曳方式切換圖片。*建議搭配autoPlay [ 填入 true 或 false ]
◉ pagination- type分頁樣式 : 幻燈片頁碼樣式。*須寫在 pagination {}裡面 [ 填入 “bullets”(小圓點)、 “fraction”(頁碼)、 “progressbar” (進度條) ]
◉ pagination- dynamicBullets動態圓點 : true 模式下，就算有很多圖也不會秀出相應數量的圓點，而是以3~5的圓點做代表。 *須寫在 pagination {}裡面 [ 填入 true 或 false ]
◉ scrollbar- draggable拖曳滾動條 : true 模式下，可開啟手動拖曳滾動條功能。 *須寫在 scrollbar {}裡面 [ 填入 true 或 false ]
◉ scrollbar- dragSize滾動條長度 : 調整滾動條長度。*須寫在 scrollbar {}裡面 [ 填入 “auto” 或 數字 (單位:px) ]
◉ autoplay- delay延遲時間 : 調整自動播放延遲時間。*須寫在 autoplay {}裡面 [ 填入數字 (單位:毫秒) ]
◉autoplay- disableOnInteraction暫停自動播放 : false模式下，經手動點擊或拖曳後，會接續自動播放。相反的，true模式下，將不會再自動播放。 *須寫在 autoplay {}裡面 [ 填入 true 或 false ]
swiper 參數整理表
資料來源: Swiper網站
