前端,網頁設計,推薦的輪播JS套件
如果想要在網站上使用輪播效果,可以考慮使用以下推薦的 JavaScript 套件:
- Slick:這是一個非常流行且易於使用的輪播套件,支援自動播放、手動滑動、無限循環等功能。
- Swiper:這是一個輕量級且功能強大的輪播套件,可以滑動、自動播放、無限循環等。
- Flickity:這是一個簡單且高性能的輪播套件,可以支援自動播放、無限循環、手動滑動等功能。
- 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>