微技巧丨左右滑動圖片高逼格技能√
昨天,微互動群內關於圖片滑動的問題引發了一系列的討論,雖然i排版編輯器上還木有更新圖片左右滑動的樣式,但是7喜還是打算把代碼放出來給大家共享啦!
廢話不說,先來示例:
示例一:靜態圖片 取經之路
:按住圖片左右滑動
示例二:動態圖片 李7喜表情包
:按住圖片左右滑動
實現方法
1. 打開i排版編輯器;
2. 切換到</>模式,複製以下代碼粘貼進去;
實現代碼(點擊展開)
<section style="">
<p style="white-space: nowrap; overflow-x: scroll;">
<img style="width: 300px !important; margin-right: 5px; visibility: visible !important; height: auto !important;" data-ratio="0.6533333333333333" data-w="300" width_="300px" src="圖片1網址" /> <img style="width: 300px !important; margin-right: 5px; visibility: visible !important; height: auto !important;" data-ratio="0.6533333333333333" data-w="300" width_="300px" src="圖片2網址" /> <img style="width: 300px !important; visibility: visible !important; height: auto !important;" data-ratio="0.6533333333333333" data-w="300" width_="300px" src="圖片3網址" />
</p>
</section>
3. 在i排版上傳圖片,把網址複製到上面代碼中圖片1網址、圖片2網址、圖片3網址相應的位置;
4. 切回編輯模式,複製粘貼到微信編輯器;
5. 完畢
以上就是左右滑動圖片的代碼啦,小夥伴們可以進行嘗試編輯;i排版隨後也將上線相應樣式,敬請期待!
如果還想學習上下滑動代碼請關注微互動和i排版的相關教程咯~
希望和你一起進步的i排版
www.ipaiban.com
【徵稿】
即日起i排版誠徵各種排版優良的文章、賬號,歡迎大家推薦與自薦;一經採納必有獎勵,排版君還會將你的推薦展示給更多盆友哦!
i排版正在徵集「微信百萬大號養成記」調查問卷,歡迎長按二維碼跳轉填寫~
推薦閱讀:
※哪些技能是給你的人氣毫無加分的?比如吹嗩吶
※《傑克奧特曼》有哪些技能?
※2015中西醫執業醫實踐技能第二站1
※銷售人員專業技能訓練整體解決方案
※明年起刷身份證就能登機,8大隱藏技能為你節省140分鐘