vue3 css 实现轮播图
2024-01-08 16:59:25
<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>
文章来源:https://blog.csdn.net/xianfei9651/article/details/135459637
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!