Swiper轮播图

爱睡D小猪

于 2024-04-30 17:22:48 发布

阅读量167

点赞数 1

CC 4.0 BY-SA版权

分类专栏：组件库文章标签： vue.js 前端

本文链接：https://blog.csdn.net/ZhouLoverBrother/article/details/138352042

版本：“swiper”: “^6.8.4”,
处理每分钟重新请求数据后，播放卡顿，快速闪，没按照设置时间播放等bug
以下是直接vue2 完整的组件代码
使用： <SwiperV :imgList=“swiperList” /

在这里插入图片描述

<template>
    <div class="bannerBox">
        <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in imgList" :key="index">
                    <img class="img" :src="item" />
                </div>
            </div>
          
            <div class="swiper-button-prev swiper-button-white">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="swiper-button-next swiper-button-white">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>
        <!-- <div style="height: 15px; width: 400px"></div>
      <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-bottom" v-for="(item, index) of bigImg" :key="index"><