swiper实现轮播效果

5版本的swiper

npm insatll -s swiper@5

1.html

  <!--banner轮播-->

        <div class="swiper-container" id="mySwiper">

          <div class="swiper-wrapper">

            <div

              class="swiper-slide"

              v-for="(carousel, index) in GetBannerLIst"

              :key="carousel.id"

            >

              <img :src="carousel.imgUrl" />

            </div>

          </div>

          <!-- 如果需要分页器 -->

          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->

          <div class="swiper-button-prev"></div>

          <div class="swiper-button-next"></div>

        </div>

2.js

import Swiper from "swiper";

watch: {

    // 监听GetBannerLIst

    GetBannerLIst: {

      handler(newValue, oldValue) {

        // netxTick 在下次dom更新  在修改数据之后立即使用这个方法，获取新的dom

        this.$nextTick(() => {

          var mySwiper = new Swiper("#mySwiper", {

            loop: true, // 循环模式选项

            pagination: {

              el: ".swiper-pagination",

// 如果需要分页器

              clickable: true,

            },

            // 如果需要前进后退按钮

            navigation: {

              nextEl: ".swiper-button-next",

              prevEl: ".swiper-button-prev",

            },

            autoplay: {

              delay: 1000,

//其他操作不影响循环

              disableOnInteraction: false,

              //  pauseOnMouseEnter: true,

            },

          });

//鼠标移入暂停

          mySwiper.el.onmouseover = function () {

            mySwiper.autoplay.stop();

          };

          mySwiper.el.onmouseout = function () {

            mySwiper.autoplay.start();

          };

        });

      },

    },

  },

3.css可以在入口文件main.js中引入

import 'swiper/css/swiper.css'