VUE2实现轮播图广告

安装依赖

npm install swiper@5.4.5

页面代码

<template>
  <div class="banshi">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          v-for="item in swiperList"
          :key="item.id"
          class="swiper-slide"
          :style="`background-image:url(${item.imgUrl})`"
        >
          <h3>{{ item.title }}</h3>
          <el-button>立即办理</el-button>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      swiper: null,
      swiperList: [
        {
          id: 1,
          title: '采集国家二级保护野生植物审批',
          imgUrl:
            '图片地址',
        },
        {
          id: 2,
          title: '农村危房改造',
          imgUrl:
            '图片地址',
        },
        {
          id: 3,
          title: '农村危房改造',
          imgUrl:
            '图片地址',
        },
        {
          id: 4,
          title: '农村危房改造',
          imgUrl:
            '图片地址',
        },
      ]
    }
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {

    getSwiper() {
      this.swiper = new Swiper('.swiper-container', {
        loop: true, // 无缝
        autoplay: { //自动开始
          delay: 10, //时间间隔
          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        paginationClickable: true,
        slidesPerView: 4, // 一组三个
        spaceBetween: 30, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true, // 分页器可以点击
        },
      });
    }

  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
    this.getSwiper();
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style scoped>
.banshi {
  width: 1200px;
  margin: 0 auto;
  padding: 70px 0;
  .swiper-slide {
    position: relative;
    height: 328px;
    width: 264px;
    padding: 36px 22px;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #f7f8fa;
    .el-button {
      z-index: 2;
    }
  }
}
</style>

效果