[ 工具分享 ] Slider and Carousel 幻燈片( 新增 Swiper API )

標籤: , , , , , , ,

今天要跟大家介紹幻燈片的小工具,幻燈片可以說是讓網頁瞬間升級最方便的功能之一了!如果能夠自己寫當然是最好的,但是如果沒有什麼基礎又想做出幻燈片的功能?推薦幾個開放原始碼的網站給你們參考~就能擁有厲害的幻燈片效果了喔~

1. Swiper
Swiper是使用手機也可以用Touch的方式滑動,符合現在多設備開啟網頁的時代。
點我
swiper
推薦指數:★★★★★
推薦原因:他有非常多silder的應用,開放原始碼且乾淨簡單,可以依需要的功能去製作。
資源:
Swiper 增加轉場效果
將影片用在Silder
Swiper API

2. PgwSlider
這個比較普通,但是他也可以直接客製化看你要做的效果是什麼樣子,再依照他開放的原始碼去修改,比較值得一提的是他有垂直式的List(圖片縮圖的部分)。
點我
pgwSlider
推薦指數:★★★☆☆
推薦原因:這款其實蠻普通的,但是 List 的功能又蠻吸引人的,厲害一點自己做也是可以做出來的XD

3. W3C
這是一個簡單的 how to 教學,跟著做可以做出他 Demo 的樣子。盡管按下Try it yourself吧!
點我
推薦指數:★★★☆☆
推薦原因:如果想要自己試著了解幻燈片是怎麼做出來的可以試試看 W3C 的教學。

4. BootStrap 4 Carousel
BootStrap 擁有很多前端呈現的效果可以套用,如果知道怎麼去修改的話使用 BS 做網站也是很快的選擇。
點我
推薦指數:★★★★☆
推薦原因:Bootstrap 本身是一個很好適應各個瀏覽器的套件,同時支援RWD的技術,如果只是要製作圖片的滑動來說非常足夠,但是如果想要利用滑動功能來做一些應用就略有限制。

5. Owl Carousel
這款幻燈片套件工具和 Swiper 類型差不多,跟 Swiper 使用彈性上來說差不多,也是很好上手的工具之一。
點我
點我
owl-carousel
推薦指數:★★★★★
推薦原因:會推薦他的原因是他介面非常乾淨簡單明瞭,HTML / CSS /JS 該怎麼使用需要什麼都分類清楚,如果想要什麼特殊功能例如:Autoplay等等的也可以從他提供的API去做修改,就彈性使用度來說不輸 Swiper 喔!
資源:
Owl Carousel 增加動畫切換效果

幻燈片有很多種呈現的方式,也是最容易讓網站整體細緻程度提升的工具,同時也可以在各種設備有相當好的表現,是我個人蠻喜歡使用的一個功能,不管是用BANNER還是文字介紹等都非常的適合喔!我推薦的這些工具是我用起來覺得還不錯的,沒有說我給比較少顆星星就不好喔~對你來說好不好用也是要自己體驗才知道~

★ 其他效果的幻燈片
點我
這個幻燈片類似旋轉木馬的效果,他有提供教學以及他的製作方式,有興趣的人可以參考看看。



相關文章

刪除 wordpress 自動產生的 p 與 br 如何刪除 wordpress 自動產生的 p 與 br呢?如果有自己架站的話就知道當我們想要用文字編輯器來撰寫自己的版面的時候總是會莫名其妙生出 p 或是 br 導致排版亂掉。當遇到這總情況的時候總是...
HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...
如何自訂義動畫 Animate On Scroll   上一篇有教大家基本的 AOS Animations 使用方式,這一篇要給有需要自訂義動畫的夥伴們所使用。   基本使用方式 連結支援: 滾動到此時執行動...
One Page Scroll 判斷目前所在區塊(4/19更新說明)...   什麼是 One Page Scroll 呢? 概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用...