vue2中使用Swiper5

前提与背景

如果是非vue-cli初始化的文件需要去官网下包，如果是vue-cli创建那么在终端直接npm i swiper@5

swiper组件官网下载地址：https://www.swiper.com.cn/download/index.html

作用：swiper专门做轮播图很专业，因此引用他的组件步骤如下（目前vue2项目最高用5版本以下较合适，5版本是相对比较稳定兼容vue2的）

步骤

1. 引包
2. 页面中有结构
3. new Swiper实例（为轮播图添加动态效果）

以下为详细步骤

npm 下载

npm i swiper@5

标题

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

引入模块和css样式

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

实例

<template>
  <div>
   <div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" 
        v-for="(item,index) in container" 
        :key="index">{{item}}</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>
  </div>
</template>

<script>
import Swiper from "swiper";
import 'swiper/css/swiper.css'
export default {
  data() {
    return {
      container:[1,2,3,4]
    };
  },
   watch: {
    container: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          var mySwiper = new Swiper(this.$refs.cur, {
            loop: true,
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //点击小球的时候也切换图片
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            //一页展示几张图片
            slidesPerView: 3
          });
        });
      },
    },
  },
};
</script>
</style>