文章專區

網頁設計相關文章

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一樣放入以下連結: