一張滑動圖中多個點擊切換，華為這是怎么做的？
老規矩，先看效果：
這個效果來自華為《世界心臟日 | 有些“心”事，想告訴你》一文，整體來看，它是一個圖片左滑效果，很多小伙伴好奇的是，第一張滑動圖上有多個點擊切換交互是怎么做的？
通過兩種路徑我們可以實現：
一個是SVG案例庫（brandtime.cn）搜索這篇圖文，在案例詳情頁通過一鍵還原來實現；
一個是直接在 iPaiban Pro 編輯器找到需要的組件/組合，然后進行編輯。
對編輯器還不夠熟悉的小伙伴可以使用第一種方法，它可以快速幫你定位需要的效果模板，剩下的你只需要換圖就可以了。
案例庫搜索「華為」，在搜索結果中限定條件「支持一鍵還原」就能看到所有可以一鍵還原的華為圖文，目前有50多篇。
其中包括：
另外蘋果、寶馬中國、GQ實驗室等品牌也有許多案例支持一鍵還原，案例庫支持一鍵還原的案例數量達7600+，一鍵還原的詳細教程戳：《一鍵還原蘋果、寶馬和GQ圖文，制作同款效果超方便啦！》
想直接使用編輯器制作的小伙伴，來看第二種方法的詳細教程吧！
工具：iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com
組合：長屏左滑組合
編號：10867（組合）
組件：點擊-切換圖片
編號：10005（組件）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組合」按鈕，點擊「滑動組合」分類中選擇「長屏左滑組合」，或者直接在「組合」中搜索編號10867。
第2步：添加組件位
點擊「點擊此處配置」，進入組合編輯模式。
在組合編輯模式中，默認放置了2屏滑動模塊，華為案例中需要滑動8篇，我們點擊「添加組件位」增加6屏滑動模塊。
第3步：添加槽（小組件位）
每個滑動模塊中默認有一個槽，一個槽代表一個小組件位，我們可以拖動需要的組件到槽中，一個滑動模塊中可以添加多個槽。
注意，每個滑動模塊的槽數可以不一致，但每個滑動模塊所有槽中的圖片加起來的圖片高度應該保持一致。
華為案例中，第一屏滑動中有多個點擊切換交互，說明有多個槽，我們點擊「增加·槽」添加5個槽。其他屏滑動中只需添加1個槽。
第4步：拖拽組件到槽中并編輯
華為案例中主要用到了「無縫圖」和「點擊-切換圖片」兩種效果。我們在左側組件中找到對應組件，按順序分別拖拽到組件位中。
然后編輯組件上傳需要的素材就可以了。
第5步：導入公眾號后臺
點擊左上角「保存并退出」，在編輯器主頁右側點擊「預覽草稿」進行預覽，預覽沒有問題后繼續點擊「導入微信后臺」開始導到公眾號。
導入時使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手還支持一鍵打包下載圖文圖片素材，非常方便，安裝教程戳：《iPaiban Pro小助手v2.0來啦！》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
● SVG 黑科技交互排版????????
·
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）