能向左也能向右滑的雙向滑動,教你1分鐘實現!

今天咱們再來看看雙向滑動。

雙向滑動是什麼?上週有小夥伴扔來「施耐德電氣」的一個案例,這種

第一張圖片既能向左也能向右滑動的互動

就是雙向滑動:

·

x-_p-_o-[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]-o_q-_-x

x-_p-_o-[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]-o_q-_-x

▲來自「施耐德電氣」公眾號

方法很簡單:

左滑組合中巢狀一個右滑元件即可。

有一點要注意的是,

無論是左滑組合還是右滑元件,我們要選擇圖片可以自動對齊的。

(不瞭解自動對齊的戳:《左 右 滑 動 已 升 級》)

左滑中套右滑,聽著就挺有意思,一起看下詳細教程吧,熟練操作1分鐘就能完成。

工具:

iPaiban Pro 黑科技編輯器,網址:x.iPaiban.com

組合:

左滑組合(自動對齊)

編號:

10249(組合)

第1步:

選擇組合

登入 iPaiban Pro 編輯器後,點選編輯器左側「組合」按鈕,點選「滑動組合」中「左滑組合」卡片下方的「檢視更多衍生元件」,選擇「左滑組合(自動對齊)」,或者直接在「組合」中搜索編號10249。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

第2步:

選擇元件

點選「點選此處配置」,進入組合編輯頁面。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

組合預設有兩個元件位,

每一個元件位相當於一個滑動頁

,如果想要新增滑動頁,點選「新增元件位」即可。

我們

可以拖動左側任意元件到元件位

中,然後再對元件進行編輯。這裡我們需要兩個元件:

元件:「單層滑動-右滑(自動對齊)」

編號:10240(元件)

元件:全能無縫圖

編號:10028(元件)

如圖拖動「單層滑動-右滑(自動對齊)」元件至第一個元件位中,拖動「全能無縫圖」元件至第二個元件位中。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

能向左也能向右滑的雙向滑動,教你1分鐘實現!

*如果你想像施耐德電氣原文中一樣給滑動圖新增超連結,可選擇下列元件:

元件:單層滑動-右滑(自動對齊、超連結)

編號:10244(元件)

元件:超連結-圖片(無角標)

編號:10030(元件)

第3步:

上傳圖片素材

點選第一個元件位,在右側上傳準備好的兩張滑動圖。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

如果把雙向滑動的三張圖片按照位置分為左、中、右三張圖片的話,那麼

在第一個元件位上傳的兩張圖片分別是中圖和左圖。

點選第二個元件位,在右側上傳準備好的右圖。所有滑動圖尺寸需保持一致。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

第4步:

上傳背景圖

為避免滑動圖之間出現不必要的縫隙,編輯器還提供一個背景圖的設定,點選紅色小三角符號就能看到。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

一般是不會出現縫隙的,所以只需上傳一張與滑動圖同尺寸的白色圖片即可。之後會上線一鍵清空背景圖的功能,使用更方便。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

第5步:

匯入公眾號後臺

點選左上角「儲存並退出」,在編輯器主頁右側點選「預覽草稿」進行預覽,預覽沒有問題後繼續點選「匯入微信後臺」開始導到公眾號。

能向左也能向右滑的雙向滑動,教你1分鐘實現!

影片教程:

TAG: 元件滑動點選組合對齊