vue2项目使用swiper实现轮播效果（超详细）

vue2安装使用swiper实现轮播（超简单）

第一步：安装swiper`

  npm install [email protected] --save-dev  // 安装swiper

第二步：在main.js中引入

  //引入swiper
      import 'swiper/dist/css/swiper.min.css'
      import 'swiper/dist/js/swiper.min'

第三步：在component下新建一个名为swiper的组件
其html如下：

<template>

    <div class="container">
      <div class="containerBox">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide item" v-for="(item, index) in pointImgList" :key="index">
              <img class="img" :src="item.thumb1" alt="">
            </div>
         
          </div>
                 <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
       			
            <div class="swiper-pagination"></div>//分页器
        </div>
      </div>
    </div>

</template>

注意一定要在组件内引入引入引入！！！

知道你们不想写，直接复制就好了

import  Swiper  from "swiper"

需要data提供数据：图片路径仅供参考

data() {
    return {
      pointImgList: [
        {
          thumb1: require('../assets/1.webp')
        },
        {
          thumb1: require('../assets/2.webp'),
        },
        {
          thumb1: require('../assets/3.jpg'),
        },
        {
          thumb1: require('../assets/4.jpg'),
        },
      ]
    }
  },

调用方法：methods中：

  methods: {
    bannerPoint() {
      new Swiper(".swiper-container", {
        loop: true,
        autoplay: {
          delay: 2000, //1秒切换一次
          disableOnInteraction: false
        },
        updateOnImagesReady: true,
        slidesPerView: 1,  //设置slider容器能够同时显示的slides数量
        //spaceBetween : '10%',按container的百分比

        observer: true,//在 Swiper 的上启用动态检查器(Mutation Observer)，如果你更改swiper 的样式（隐藏/显示）或修改其子元素（添加/删除幻灯片），Swiper 会更新（重新初始化）并触发 observerUpdate 事件。
        observeParents: true,
        observeSlideChildren: true,

        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          paginationClickable:true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next', // 右按钮
          prevEl: '.swiper-button-prev', // 左按钮
        },
      })
    }

  },

初始时要调用methods中方法：

  mounted() {
    this.bannerPoint()
  },

样式：

.containerBox {
  width: 1500px;
  margin: 50px auto;

  .item {
    width: 100%;

  }

  .img {
    width: 100%;
  }