swiper 轮播图制作

swiper插件

    经常制作轮播图（移动端|PC端也可以使用）

      使用步骤：

        第一步：引入相应的依赖包（swiper.js|swiper.css）

         第二步：页面中的结构务必要有

         第三步：初始化swiper实例，给轮播图添加动态效果

 Carousel文件中的index.vue

// 引入Swiper包
import Swiper from "swiper";

 main.js

// 引入Swiper样式
import 'swiper/css/swiper.css'

Carousel文件中的index.vue(实例中发请求获取到的数据是父组件中获得的，通过父子组件通信props把数据传过来的)

<template>
  <!-- 轮播图的地方 -->
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(carousel, index) in list"
        :key="carousel.id"
      >
        <img :src="carousel.imgUrl" />       
      </div>
    </div>
    <!-- 如果需要分页器 --&