vue3 css 实现轮播图

<template>
  <swiper :options="swiperOptions">
    <swiper-slide v-for="(image, index) in images" :key="index">
      <img :src="image" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
  </swiper>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import 'swiper/css/swiper.css';
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';

const images = ref([
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  // Add more images here
]);

const swiperOptions = ref({
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
</script>

<style scoped>
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>