Nuxt.js中如何实现鼠标经过缩略图时图片和描述文字从右向左滑动？

npm install swiper

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/swiper.js', ssr: false } // ssr: false 避免服务端渲染问题
  ]
}

// plugins/swiper.js
import Vue from 'vue'
import Swiper from 'swiper/bundle'
import 'swiper/css' // 引入Swiper的CSS样式

Vue.use(Swiper)

<template>
  <div class="image-slider">
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(image, index) in images" :key="index">
        @@##@@
        <p>{{ image.description }}</p>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      images: [
        { src: 'path/to/image1.jpg', description: 'Image 1 Description' },
        { src: 'path/to/image2.jpg', description: 'Image 2 Description' }
      ],
      swiperOptions: {
        direction: 'horizontal',
        slidesPerView: 1,
        spaceBetween: 10,
        effect: 'slide',
        speed: 300,
        autoplay: false,
        loop: false, //根据需求设置是否循环
        mousewheel: true, //启用鼠标滚轮控制
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      }
    }
  }
}
</script>