用vue3写一个轮播图

可以使用 vue-awesome-swiper 插件，或手动实现。下面是手动实现的代码示例：

template:
<div class="swiper-wrapper">
<div v-for="(item, index) in items" :key="index" class="swiper-slide">
<img :src="item.imgUrl" alt="">
</div>
</div>

script:
import { reactive, onMounted } from 'vue'

export default {
setup() {
const state = reactive({
items: [
{
imgUrl: 'http://example.com/1.jpg'
},
{
imgUrl: 'http://example.com/2.jpg'
},
{
imgUrl: 'http://example.com/3.jpg'
},
]
})

const swiper = null

onMounted(() => {
swiper = new Swiper('.swiper-container', {
effect: 'slide',
loop: true,
pagination: {
el: '.swiper-pagination'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
autoplay: {
delay: 3000
}
})
})

return {
state,
swiper
}
}
}