視頻也能左右滑動觀看?“多圖+視頻左右滑動”教程,支持長圖無縫排版哦!
視頻也能左右滑動觀看?“多圖+視頻左右滑動”教程,支持長圖無縫排版哦!
胖友們,早上好!
很久很久之前,三兒寫了有關(guān)“圖片左右滑動”的教程,教了胖友們?nèi)绾翁砑佣鄰垐D片滑動。
前幾日,三兒又寫了關(guān)于“圖片上下滑動”的教程,教了胖友們?nèi)绾翁砑尤龔垐D片滑動和圖片無縫的方法。
今天,再教大家一個技能
“圖片視頻左右滑動”
▲ 樣式ID:93076
這個就是一個默認(rèn)樣式“3圖+1視頻”的左右滑動效果。當(dāng)然,我這里的圖片是做成長圖,裁切為三張,替換在樣式里面的,所以看起來像是一張長圖。
有圖片設(shè)計能力的同學(xué),可以這么設(shè)計圖片來使用樣式,當(dāng)然,直接使用三張不同圖片加視頻也是可以的。
圖片尺寸比例建議16:9,推薦960px*540px,不然圖片與視頻之間會參差不齊。
135不支持直接上傳視頻。本樣式可以替換圖片視頻地址。視頻地址僅支持騰訊視頻地址和公眾號上傳視頻的地址。
圖片可添加多張,視頻可以添加多個,但一篇公眾號文章最多只能添加3個視頻。
點擊樣式中圖片,再點擊圖片彈窗中的“換圖”,通過本地上傳或在線素材庫等方式,完成第一張圖片的替換。
換好第一張圖之后,拖動下方滑竿,點擊第二張圖片重復(fù)操作,替換第二張圖片和第三張圖片。
點擊樣式,再點擊樣式彈窗中“視頻”按鈕,替換視頻連接即可。注意視頻地址僅支持騰訊視頻地址和公眾號上傳視頻的地址。
如果想給樣式添加3個以上的圖,可以在HTML模式添加。復(fù)制<section style="display: inline-block;......"/></section>,并粘貼在其后,退出HTML模式就成功新添加了一張圖片,接著換圖就可以了。
此樣式默認(rèn)是一個視頻,如果你非要再添加視頻,也是可以的,但數(shù)量不能超過3個。進(jìn)入HTML模式,復(fù)制<section style="display: inline-block;......></iframe></section>,并粘貼在其后,退出HTML模式就成功新添加了一個視頻。
替換視頻連接
但是,如果我們增加了視頻之后,上文講到替換視頻連接在方式就不適用了,需要再HTML里面替換。找到這段代碼......src="https://......"></iframe>,替換雙引號里面視頻地址,完成視頻連接的替換。
以上就是有關(guān)“圖片視頻左右滑動”樣式使用、修改的教程了。趕快去樣式中心收藏這個樣式,使用一波試試?yán)病?/span>
【福利時刻-免費領(lǐng)取7天135編輯器VIP會員】
點擊http://serialka.com/users/invite/ddb12a17ce400c35fe041d275a578351,注冊135編輯器,即可獲得7天VIP會員
立即登錄
- 知乎熱議:微信公眾號如何快速漲粉?
- 0基礎(chǔ)運營小白學(xué)習(xí)什么新媒體課程比較好?
- 新媒體,自媒體新人必學(xué)的課程有哪些?
- 不懂就問:新媒體運營應(yīng)該怎樣學(xué)習(xí)?