前端,網頁設計,推薦的輪播JS套件

如果想要在網站上使用輪播效果,可以考慮使用以下推薦的 JavaScript 套件:

  1. Slick:這是一個非常流行且易於使用的輪播套件,支援自動播放、手動滑動、無限循環等功能。
  2. Swiper:這是一個輕量級且功能強大的輪播套件,可以滑動、自動播放、無限循環等。
  3. Flickity:這是一個簡單且高性能的輪播套件,可以支援自動播放、無限循環、手動滑動等功能。
  4. Owl Carousel:這是一個功能強大且易於使用的輪播套件,支援自動播放、無限循環、手動滑動等功能。

在選擇輪播套件時,您可以根據您的需求選擇適合的套件。例如,如果您需要一個輕量級且性能良好的套件,那麼 Flickity 或 Swiper 可能是不錯的選擇。如果您需要一個功能豐富且易於使用的套件,那麼 Slick 或 Owl Carousel 可能是您的最佳選擇。

不過Slick無限循環有一些小問題,最後一個物件連接第一個物件,會有奇怪的突兀感。

Swiper – The Most Modern Mobile Touch Slider (swiperjs.com)

使用方式

<link  rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

檔案留存

GitHub – nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions


slick – the last carousel you’ll ever need (kenwheeler.github.io)

使用方式


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

檔案留存

GitHub – kenwheeler/slick: the last carousel you’ll ever need


Flickity · Touch, responsive, flickable carousels (metafizzy.co)

使用方式

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

檔案留存

GitHub – metafizzy/flickity: Touch, responsive, flickable carousels


Home | Owl Carousel | 2.3.4 (owlcarousel2.github.io)

使用方式

<link rel="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

檔案留存

You may also like...

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

%d 位部落客按了讚: