轮播图手机

最新推荐文章于 2024-10-10 01:16:57 发布

a3456896

最新推荐文章于 2024-10-10 01:16:57 发布

阅读量50

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/a3456896/article/details/129799855

版权

这段代码展示了如何利用Swiper库创建一个带有分页器、自动播放和循环模式的图片轮播组件。Swiper-container定义了轮播的宽度、高度和背景色，而swiper-slide则包含每张要展示的图片。autoplay参数设置轮播间隔时间，loop参数确保轮播图在结束时能循环播放。

摘要由CSDN通过智能技术生成

 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./img/手机.png" alt="">
            </div>
            <div class="swiper-slide">
                <img src="./img/手机.png" alt="">
            </div>
            <div class="swiper-slide"> 
                <img src="./img/手机.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <!-- 分页器就是这个小原点 -->
        <div class="swiper-pagination"></div>
    </div>

.swiper-container{
    width: 100%;
    height: 200px;
    background-color: aquamarine;
    box-sizing: border-box;
}

var mySwiper = new Swiper ('.swiper-container', {
        // direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: {
            delay: 1000,//1秒切换一次
            disableOnInteraction: false,
          },
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      })