介紹

Glider.js是一個依賴原生js的輪播圖組件庫，因為其壓縮后僅僅2.8k大小，其擁有著很好的性能，Glider.js在Github上開源，目前已擁有2.4kstars。

---

---

Github

https://github.com/NickPiscitelli/Glider.js

特性

• 非常小巧(<2.8kb gzip壓縮！)
• 非常快速(初始化時間低至25ms！)
• Vanilla JS-沒有依賴關系
• 本機瀏覽器滾動(動量滾動！)
• 完全響應(基于斷點的設置)
• 自定義的箭頭和點導航
• 完整的鍵盤可訪問性+ ARIA標簽
• 鼠標拖動支持！
• Flexbox支持(默認情況下啟用)
• 容易擴展

演示

• 多項支持

new Glider(document.querySelector('.glider'), { slidesToShow: 5, slidesToScroll: 5, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});

• 單個項目

new Glider(document.querySelector('.glider'), { slidesToShow: 1, dots: '#dots', draggable: true, arrows: { prev: '.glider-prev', next: '.glider-next' }});

• 透視圖

new Glider(document.querySelector('.glider'), { slidesToShow: 5, slidesToScroll: 1, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});

• 響應設置/滾動鎖定支持

new Glider(document.querySelector('.glider'), { // 移動優先默認值 slidesToShow: 1, slidesToScroll: 1, scrollLock: true, dots: '#resp-dots', arrows: { prev: '.glider-prev', next: '.glider-next' }, responsive: [ { // 屏幕大于>= 775px breakpoint: 775, settings: { slidesToShow: 'auto', slidesToScroll: 'auto', itemWidth: 150, duration: 0.25 } },{ // 屏幕大于 >= 1024px breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, itemWidth: 150, duration: 0.25 } } ]});

• 小數幻燈片

new Glider(document.querySelector('.glider'), { slidesToScroll: 1, slidesToShow: 5.5, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});

• 添加刪除項

new Glider(document.querySelector('.glider'), { slidesToShow: 3, dots: '#dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});

基本使用

• 最基本的

• 帶分頁

your content here your content here your content here your content here ? ? window.addEventListener('load', function(){ new Glider(document.querySelector('.glider'), { setting-name: setting-value })})

總結

Glider.js是一個優秀的JavaScript組件，由于其最大化利用原生能力，因為具備極高的性能，即使是在移動端。

總結

以上是生活随笔為你收集整理的js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。