加上css移动动画小狗

好的，我们可以在轮播图中添加一个小狗图片，并给它添加CSS移动动画。以下是具体的代码实现：

1. 在swiper-slide中添加小狗图片并设置样式

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(item, index) in swiperData" :key="index">
      <img :src="item.imgUrl" :alt="item.title">
      <div class="caption">{{ item.title }}</div>
      <img class="dog" src="./assets/dog.png" alt="小狗">
    </swiper-slide>
  </swiper>
</template>

<style>
  .dog {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: move 3s linear infinite;
  }

  @keyframes move {
    0% { left: 50%; }
    25% { left: 55%; }
    50% { left: 50%; }
    75% { left: 45%; }
    100% { left: 50%; }
  }
</style>

其中，我们给小狗设置了绝对定位，使它位于轮播图底部中央位置。然后我们定义了一个名为move的CSS动画，通过left属性的变化来实现小狗的移动。

2. 修改swiperOptions配置项，添加loop和autoplay配置

swiperOptions: {
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  }
}

这样轮播图就会自动循环播放，小狗也会一直在移动了。

以上就是添加CSS移动动画的小狗的详细代码实现。