Vue内对Swpier轮播图的使用

官网：www.swiper.com.cn/

1、选择需要下载的Swiper版本在终端使用npm下载即可

$ npm install swiper

也可指定版本下载后方

$ npm install swiper --save @版本号

下载成功后可以去package.js中查看下载成功的版本

下面只用在script中需要使用轮播的页面中引入你的Swiper

import Swiper, { Navigation, Autoplay } from "swiper/core";

大括号内是你根据轮播功能的需求引用需要的组件方法、具体的方法可查看Swiper官网的API：www.swiper.com.cn/api/start/n…

Swiper.use([Navigation]).use([Autoplay]);

然后在下面在页面注册你引入的方法

具体使用：

 new Swiper(".swiper-container", { //从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'
            slidesPerView: "auto", //轮播图自适应你页面框度
            loop: false, 是否开启循环模式 //
            lazy: true 图片是否延迟加载//,
            autoplay: { 自动切换//
              delay: 3000, 切换间隔时间//
              disableOnInteraction: false,
            },
            navigation: {
              nextEl: ".swiper-button-next", // 右按钮
              prevEl: ".swiper-button-prev", // 左按钮
            },
            keyboard: {
            enabled: true, 
            onlyInViewport: true,
            },//设置开启键盘来控制Swiper切换
            on: { //注册事件 里面的事件方法可查看官网
              slideChangeTransitionEnd: () => {
                let num = this.$refs.mySwiper.swiper.activeIndex;
                this.listDetails = this.swiperList[num];
              },
            },
          });
          写在定义的方法内

贴上html代码仅供参考

 <div class="swiper-container">
          <div class="swiper-wrapper ">
            <div class="swiper-slide " v-for="item in swiperList" :key="item.id" :id="item.id">
              <div>
                <el-image style="width: 143px; height: 204px; background-color: white" @click="handleClickRead(item.id)" fit="contain" :src="item.cover" alt=""></el-image>
              </div>
              <div>
                <p class="title">{{ item.title }}</p>
              </div>
              <p class="text">{{ item.description }}</p>
            </div>
          </div>
        </div>

这只是个人对Swiper简单的理解，希望能帮到你