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

通常分为以下五个步骤

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

第一步：下载swiper插件

$ npm i [email protected]

第二步：在js中引入插件

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

第三步：填充HTML内容

第四步：给容器设置宽高

第五步：在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，将以下标签替换

    //替换前
    

        
Slide 1
        
Slide 2
        
Slide 3
    
    //替换后
    

        

              
        
    

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

    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);
    }

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

来看看最终效果

效果图.png