轮播图手机

 <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',
        },
      })