vue3使用swiper实现首页图片轮播并自定义左右箭头样式及分页器样式

安装vue-awesome-swiper

npm intall vue-awesome-swiper --save

安装swiper

npm install swiper --save

关键部分代码

<template><div><swiper :modules="modules" navigation :pagination="{ clickable: true }" :autoplay="{ delay: 3000, disableOnInteraction: false }"><swiper-slide v-for="(image, index) in banners" v-bind:key="index"><img :src="image" class="swiper-image" /></swiper-slide></swiper></div>
</template><script>
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Pagination, Navigation,Autoplay  } from "Swiper";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css";
import "swiper/css/pagination";
import { ref, reactive } from "vue";import banner1 from "../assets/images/home/banner1.png";
import banner2 from "../assets/images/home/banner2.png";
import banner3 from "../assets/images/home/banner3.png";
import banner4 from "../assets/images/home/banner4.png";
export default {components: {Swiper,SwiperSlide,},setup() {let banners = reactive([banner1, banner2, banner3, banner4]);return {banners,modules: [Navigation, Pagination,Autoplay],};},
};
</script><style lang="scss" scoped>
::v-deep .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {content: none;
}
::v-deep  .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{content: none;
}
::v-deep .swiper-button-next {width: 62px;height: 62px;background-image: url(../assets/images/home/btn-next.png);background-size: 62px auto;margin-right: 30px;
}
::v-deep .swiper-button-prev{width: 62px;height: 62px;background-image: url(../assets/images/home/btn-pre.png);background-size: 62px auto;margin-left: 30px;
}
::v-deep .swiper-pagination-bullet{width: var(--swiper-pagination-bullet-width);height: var(--swiper-pagination-bullet-height);border-radius: 10px;background: #d1d1d1;opacity:1;
}
::v-deep .swiper-pagination-bullet-active{width: var(--swiper-pagination-bullet-width);height: var(--swiper-pagination-bullet-height);border-radius: 10px;background:#20cf89 ;
}
::v-deep .swiper-pagination{margin-bottom: 47px;
}
.swiper-image {width: 100%;height: 695px;object-fit: cover; /* 保持宽高比，不裁剪图片 */}
}
</style>

效果

vue版本

"dependencies": {"swiper": "^8.4.7","vue": "^3.4.37","vue-awesome-swiper": "^5.0.1","vue-router": "^4.4.3","vuex": "^4.1.0"},