在Vue中使用swiper插件实现轮播图效果

通常分为以下五个步骤

1. 下载插件
2. 加载插件
3. HTML内容
4. 定义大小
5. 初始化

第一步：下载swiper插件

$ npm i swiper@5.4.5

第二步：在js中引入插件

import Swiper from 'swiper';
import "swiper/css/swiper.css"

第三步：填充HTML内容

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
</template>

第四步：给容器设置宽高

<style>
.swiper-container {
    width: 600px;
    height: 300px;
}
</style>

第五步：在js中初始化轮播图

export default{
    mounted() {
    new Swiper ('.swiper-container', {
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
    })    
    }
 }

效果展示：

swiper.png

如果有需要，我们可以将代码进行简单优化，以及给轮播图添加一些其他功能，例如：

1. 引入数据
2. 添加功能

第一步：使用axios引入图片数据

  import axios from "axios";
  export default {
  data() {
    return {
      banner: []
    };
  },
  created() {
    axios
      .get("http://47.98.159.95/m-api/banner", {
        params: {
          type: 1
        }
      })
      .then(data => {
        this.banner = data.data.banners.map(item => ({
          id: item.bannerId,
          pic: item.pic
        }));
      });
  }
  }

第二步：修改html，将以下标签替换

    //替换前
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    //替换后
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in banner" :key="item.id">
              <img :src="item.pic" alt="">
        </div>
    </div>

第三步：实现无缝轮播、自动轮播

    mounted() {
    // 因为数据请求是异步微任务，所以在此设置为宏任务，让swiper初始化在数据请求成功后执行
    setTimeout(() => {
      // DOM更新后让swiper重新初始化
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          //无缝轮播
          loop: true,
          //分页器
          pagination: {
            el: ".swiper-pagination"
          },
          // 自动轮播
          autoplay: {
            // 每秒钟自动切换
            delay: 1000,
            // 用户操作swiper之后，是否禁止autoplay
            disableOnInteraction: false
          }
        });
      });
      }, 0);
    }

目前为止，一个完整的轮播图效果就实现啦，最后附上完整代码

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in banner" :key="item.id">
              <img :src="item.pic" alt="">
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import axios from "axios";
export default {
  data() {
    return {
      banner: []
    };
  },
  created() {
    axios
      .get("http://47.98.159.95/m-api/banner", {
        params: {
          type: 1
        }
      })
      .then(data => {
        this.banner = data.data.banners.map(item => ({
          id: item.bannerId,
          pic: item.pic
        }));
      });
  },
  mounted() {
    // 因为数据请求是异步微任务，所以在此设置为宏任务，让swiper初始化在数据请求成功后执行
    setTimeout(() => {
      // DOM更新后让swiper重新初始化
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          //无缝轮播
          loop: true,
          //分页器
          pagination: {
            el: ".swiper-pagination"
          },
          // 自动轮播
          autoplay: {
            // 每秒钟自动切换
            delay: 1000,
            // 用户操作swiper之后，是否禁止autoplay
            disableOnInteraction: false
          }
        });
      });
    }, 0);
  }
};
</script>

<style>
.swiper-container {
  width: 600px;
  height: 300px;
}
img {
  width: 600px;
  height: 300px;
}
</style>

来看看最终效果

效果图.png