文章專區
網頁設計相關文章
Elastislide--圖片無縫輪播展示特效
Elastislide是一款精美的響應式jquery圖片循環展示套件,類似底片的排列方式,水平垂直皆可,只要點其中一張圖片即可觀看大圖,實用而常見。
首先到https://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/下載壓縮檔,解壓縮後便會有此特效所需要的CSS和JS。
而此網站也提供了相關範例可以參考唷。https://tympanus.net/Development/Elastislide/
以下以Example 4 ( https://tympanus.net/Development/Elastislide/index4.html )為例。
HTML
前面放大的原圖,後面放排列的小圖。
CSS
直接放入elastislide.css、custom.css、demo.css的連結,別忘了修改檔案的路徑唷!
若想修改樣式可更改demo.css內容的設定
JS
同css一樣放入以下連結: