vue使用swiper实现轮播图代码

悠悠 2022-04-12 11:46 314阅读 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,
              }
            },
          }
        }