vue使用swiper实现轮播图代码-蒲公英云

vue使用swiper实现轮播图代码

悠悠 2022-04-12 11:46 342阅读 0赞

<div v-swiper:mySwiper="swiperOption">
        <div class="swiper-wrapper">
          <ul class="swiper-slide">
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_01.png" alt="head"></div>
              <p class="name">AAAAAA</p>
            </li>
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_02.png" alt="head"></div>
              <p class="name">BBBBBB</p>
            </li>
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_03.png" alt="head"></div>
              <p class="name">CCCCCC</p>
            </li>
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_04.png" alt="head"></div>
              <p class="name">DDDDDD</p>
            </li>
          </ul>
          <ul class="swiper-slide">
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_05.png" alt="head"></div>
              <p class="name">EEEEEEEE</p>
            </li>
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_06.png" alt="head"></div>
              <p class="name">FFFFFF</p>
            </li>
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_07.png" alt="head"></div>
              <p class="name">GGGGGGG</p>
            </li>
            <li>
              <div class="img-info"><img src="../assets/img/mem/nt_08.png" alt="head"></div>
              <p class="name">HHHHHHH</p>
            </li>
          </ul>
        </div>
          <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
data () {
      return {
        swiperOption: {
          loop: true,
          loopAdditionalSlides: 100,
          centeredSlides: true,
          autoplay:true,
          autoplayDisableOnInteraction : false, //鼠标悬浮停止自动轮播
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          }
        },
      }
    }