九宫格九图动画，不是八图点中间抽奖！！！！！！

element-ui只有单方向轮播图（也可能可以实现九宫格但我不知道）

native-ui有九宫格轮播图

效果如native效果

<n-carousel
          autoplay
          dot-type="line"
          :interval="Number(carouselInterval)"
        >
          <img
            v-for="(item, i) in carouselImgList"
            :key="i"
            class="go-login-carousel-img"
            :src="getImageUrl(item, 'login')"
            alt="image"
          />
        </n-carousel>

若需要在vue2写九宫格轮播图须纯手写（无须下载插件，纯底层JS和DOM代码）

HTML

<div class="go-login-box-bg">

      <aside class="bg-slot"></aside>

      <aside class="bg-img-box">
        <div class="grid-container">
          <div class="grid-item" v-for="(item, index) in bgList" :key="index">
            <img :src="getImageUrl({item:item,folder:'charts'})">
          </div>
        </div>
      </aside>

    </div>

CSS

.go-login-box-bg {
    z-index: 0;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: url(../../assets/loginbg1.png) no-repeat;
    background-size: cover; /* 使背景图自适应 */
    background-position: center; /* 将背景图居中 */
    .bg-slot{
        width:30%;
      }
    .bg-img-box{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 60%;
        margin-right: -18%;
       
        .grid-container {
          margin-left: 15%;
              width: 600px;
              height: 600px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
          }
          .grid-item {
            width: 100%;
            height: 100%;
            background-size: cover;
            transition: transform 1s ease-in-out;
            img{
              margin-right: 20px;
              margin-top: 20px;
              width: 230px;
              border-radius: 16px;
              opacity: 0.9;
            }
          }
        
       
    }
    
}

JS

const gridItems = document.querySelectorAll('.grid-item');
    console.log(gridItems)
      function shuffle(array) {
        let currentIndex = array.length, randomIndex;

        while (currentIndex !== 0) {
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex--;

          [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
        }

        return array;
      }

      function updateGrid() {
        const shuffledItems = shuffle(Array.from(gridItems));
        gridItems.forEach((item, index) => {
          item.style.transform = `translate(${shuffledItems[index].offsetLeft - item.offsetLeft}px, ${shuffledItems[index].offsetTop - item.offsetTop}px)`;
        });
      }
      window.setInterval(updateGrid, 2000);

综上就是html+css+js实现九宫格轮播图