“蒂芙尼、華洛芙這些時尚大牌都愛用的撲克展開式輪播，要怎么做?”
普通的自動輪播效果真是用得夠夠了？
今天分享一個超酷的「點擊-撲克展開輪播」，操作簡單，卻能讓圖片展示瞬間高級感爆棚。
我們先看效果，點擊圖片：
組件：點擊-撲克展開輪播(三排)
編號：11723（組件）
點擊后圖片像撲克牌一樣展開后開始輪播，相鄰兩組圖片向相反方向流暢絲滑地切換著不同照片，其中每張圖對應可跳轉小程序。
這種交互效果使用了三層布局——背景圖、展開前圖片和展開后的自動輪播圖：
想要輪播效果更好看，在設計輪播圖片時可以在兩側留出一部分透明邊緣，如下：
該交互效果使用 iPaiban Pro 黑科技編輯器里的的「點擊-撲克展開輪播(三排)」組件（編號：11723）即可實現。非常適合品牌進行產品展示。
當然，輪播圖不跳轉小程序，只是像華洛芙Wellendorff這樣單純展示也是可以的：
組件：點擊-撲克展開輪播(三排)
編號：11723（組件）
展開后的輪播圖不限于三排，大家在編輯器搜索關鍵詞「撲克展開輪播」有更多類似效果組件可供選擇。每個組件都支持設置純圖片輪播或添加超鏈接、小程序。
下面以Tiffany蒂芙尼的案例為例，一起來看看這個效果是如何制作吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：點擊-撲克展開輪播(三排)
編號：11723（組件）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組件」按鈕，在「點擊」分類中找到「點擊-撲克展開輪播(三排)」組件，或者直接在搜索框中搜索組件編號11723，點擊選擇。
第2步：上傳背景圖、展開前和展開后圖
背景圖必須有，尺寸不限,最好給一張純色圖片，點擊「換圖」按鈕上傳即可。
點擊「+」按鈕上傳展開前的圖片，展開前的圖片可上傳一張或多張。需留意每張展開前的圖片和展開后的圖片尺寸保持一致。
第3步：設置圖片跳轉
可按需選擇跳轉的內容，這里選擇小程序。
第4步：設置展開后的圖片和相應小程序路徑
注意需按順序點擊「+」按鈕上傳展開后的圖片和相應小程序路徑。展開后的圖片每排數量最好保持一致。
第5步：設置動畫效果
可按需設置展開前高度(倍數)、展開后高度(倍數)和單張輪播切換時間：
第6步：導入公眾號后臺
內容編輯完畢后，點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）