当前位置：首页 > jquery

jquery轮播插件

2026-02-03 13:27:01jquery

以下是几款常用的 jQuery 轮播插件及其特点和使用方法：

Swiper

Swiper 是一个功能强大的现代轮播插件，支持响应式设计、触摸滑动、循环播放等多种特性。虽然原生支持纯 JavaScript，但也有 jQuery 版本兼容。

使用方法：

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<script>
    $(document).ready(function() {
        new Swiper('.swiper-container', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    });
</script>

Owl Carousel

Owl Carousel 是一个轻量级的 jQuery 轮播插件，支持响应式布局和多种自定义选项。

使用方法：

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

<div class="owl-carousel">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<script>
    $(document).ready(function() {
        $(".owl-carousel").owlCarousel({
            items: 1,
            loop: true,
            nav: true,
            dots: true
        });
    });
</script>

Slick

Slick 是一个高度可定制的轮播插件，支持无限循环、懒加载和多种动画效果。

使用方法：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="your-class">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<script>
    $(document).ready(function() {
        $('.your-class').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true
        });
    });
</script>

BxSlider

BxSlider 是一个老牌的 jQuery 轮播插件，兼容性良好，适合传统项目。

使用方法：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>

<ul class="bxslider">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
</ul>

<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            mode: 'fade',
            auto: true
        });
    });
</script>