Nuxt.js中如何实现鼠标悬停触发图片与描述文字从右向左滑动的效果？

npm install swiper

<template>
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        @@##@@
        <div class="overlay">
          @@##@@
          <p>{{ description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation'; // 如果需要导航按钮
import { Navigation } from 'swiper/modules';


export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      thumbnailSrc: '/path/to/thumbnail.jpg',
      fullsizeSrc: '/path/to/fullsize.jpg',
      description: '图片描述文字',
    };
  },
  mounted() {
    this.$nextTick(() => {
      new Swiper(this.$refs.swiper, {
        direction: 'horizontal', // 设置为'horizontal'实现左右滑动
        // 其他Swiper配置选项，例如：
        // autoplay: {
        //   delay: 2000,
        //   disableOnInteraction: false,
        // },
        modules: [Navigation], // 如果需要导航按钮
        navigation: true, // 如果需要导航按钮
      });
    });
  },
};
</script>

<style scoped>
.swiper-container {
  width: 300px; /* 设置容器宽度 */
  height: 200px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出部分 */
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 图片和文字从右侧开始 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* 默认隐藏 */
}

.swiper-container:hover .overlay {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 文字从左侧开始 */
}
</style>