Vue中使用Swipper轮播图 解决效果不能出来问题

1、首先，在项目中安装Swipper

终端输入命令:npm install swiper@5.4.5 --save-dev，安装成功后在项目package.json查看

2、引入swipper和样式：

import "swiper/css/swiper.css"; //引入swiper样式
import Swiper from "swiper"; //引入swiper

 3、在mounted生命函数中引入：

setTimeout(()=>{
              var mySwiper = new Swiper("#swiperIndex", {
                    observer:true,
                    observerParents:true,
                    //配置分页器内容
                    loop: true,
                    autoplay:{
                      delay: 3000,
                      stopOnLastSlide: false,
                      disableOnInteraction: false,
                    },
                    pagination: {
                      el: ".swiper-pagination", //换页器与哪个标签关联
                      clickable :true, //分页器是否可以点击
                    },
        });
    }, 1000);

4、页面展示轮播图区域代码：

<!-- 轮播图区域 -->
                                <div class="swiper-container" id="swiperIndex">
                                  <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(item, i) in swipper_bander_img" :key="i">
                                      <img class="swiperimg" :src="item.image_path" alt="" />
                                    </div>
                                  </div>
                                  <!-- //换页器 -->
                                  <div class="swiper-pagination"></div>
                                </div>
                            </div>