html轮播如何实现

最新推荐文章于 2024-07-25 11:52:08 发布

祎祎呀

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量719

点赞数

分类专栏： html 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_47592687/article/details/131038797

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分

  <div class="swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide">1111</li>
                <li class="swiper-slide">2222</li>
                <li class="swiper-slide">3333</li>
                <li class="swiper-slide">4444</li>
                <li class="swiper-slide">5555</li>
                <li class="swiper-slide">6666</li>
                <li class="swiper-slide">7777</li>
            </ul>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
    
            <!-- 导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

js部分

 // 初始化Swiper
    var mySwiper = new Swiper('.swiper-container', {
        // 循环轮播
        loop: true,
        // 分页器
        pagination: {
            el: '.swiper-pagination',

            // 动态分页器：当你的slide很多时，为true后，分页器会有大小显示
            dynamicBullets: true,
        },
        // 前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 自动轮播
        autoplay: {
            delay: 3000,
            /**
             * stopOnLastSlide => true: 当切换到最后一个slide时停止自动切换
            */
            stopOnLastSlide: true,
            /**
             * disableOnInteraction：用户操作swiper之后，是否禁止自动轮播
             * true(默认) => 停止
             * false      => 恢复自动轮播 
            */
            disableOnInteraction: false,
        }
    });