May 2, 2019

前端輪播套件 | Owl Carousel

支援拖曳、滾動、跨瀏覽器、hash、分頁事件


文 / Siddharam 西打藍

前言


Owl Carousel 的 DocGitHub

最近接了室內設計公司的官網外包案,需要做到點擊後,向右換頁的輪播效果,有類似翻書的感覺,並且沒有切換 URL。而公司的某個專案正好有用到 Owl Carousel 這個套件,用起來也沒什麼 bug,就繼續採用了。

開始


首先須下載 Owl Carousel 的套件,另外要記得引入 jQuery,目前是用 CDN 方式引入。請去除空白:

< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">

接著,我們就來寫看我所需要的效果


// html
// 因為 markdown 關係,每個標籤都有空格,如需使用,記得移除
// 當點擊 back,會跳轉到該 hash 
< div class="owl-carousel" > < div data-hash="slide1" style="background:red;"> Your Content 第一頁 < button class="next" >click< /button> < /div> < div data-hash="slide2" style="background:yellow;"> Your Content 第二頁 < button class="next">click< /button> < a href="index.html#slide1">back< /a> < /div> < div>



// javascript
$(document).ready(function(){ $(".owl-carousel").owlCarousel({ items: 1, // 每頁有多少筆 loop: false, center: true, mouseDrag: false, // 滑鼠拖曳 touchDrag: false, // 觸控拖曳 pullDrag: false, URLhashListener: true, //紀錄 a 標籤,如上面的 data-hash="slide1" startPosition: 'URLHash', // 可為 string / number dotsContainer: '.custom-dots', // nav bar 的名稱 responsiveRefreshRate: 0, // 每多久計算一次 client 瀏覽器寬度 responsive: { // 不同 width 下的調整 0: { margin: 0, autoWidth: false }, 992: { autoWidth: false } } }); // next.owl.carousel 事件,可以跳轉至下一張 slide $('.next').click(function () { $(".owl-carousel").trigger('next.owl.carousel') }) });


如果 mobile 變化較大,可以另外寫一組 config。接下來若有新的樣式需求,會持續補充。




閱讀量




技術文章與合作


寫這些技術分享文,筆者是沒有額外收入的,但每年還是要付域名費用,如果你喜歡我的文章,歡迎 自由贊助 唷!也期待收到你的 回饋

有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: