vue3 js 图片轮播

Vue3.js 中实现图片轮播通常会利用 Vue 的响应式特性以及组件化思想，结合第三方库如 Vue-Swiper、vue-awesome-swiper 或者自己编写基于 Vue 的滚动指令。以下是一个简单的步骤概述：

1. 安装依赖：首先安装需要的库，比如 `npm install swiper-vue3` 或 `yarn add swiper-vue3`.

2. 创建组件：创建一个名为 `Slider.vue` 的组件，包含 Swiper 组件和其他必要的属性和方法。

<template>
  <div class="slider">
    <swiper :options="swiperOptions" ref="mySwiper">
      <swiper-slide v-for="(image, index) in images" :key="index">
        <img :src="image.src" alt="Slide {{ index + 1 }}">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { swiper, SwiperOption, SwiperSlide } from 'swiper-vue3';

export default {
  components: {
    Swiper,
  },
  props: {
    images: Array,
  },
  setup(props) {
    const swiperOptions = {
      // Swiper 配置项...
    };

    onMounted(() => {
      // 初始化 Swiper
      this.$refs.mySwiper.swiper.init();
    });

    // 自定义滑动事件或其他操作
    const handleSwipe = (event) => {
      console.log('Slide changed:', event);
    };

    return {
      swiperOptions,
      handleSwipe,
    };
  },
};
</script>

<style scoped>
.slider {
  /* 样式设置 */
}
</style>