前端学习|vue3.0 实现旋转木马前端|javascript|vue.js

做的比较丑最后图片
本来打算用vue-carousel-3d这个组件的，但是这个组件一直报源码错误，修改了半天也没有解决

文章图片

【前端学习|vue3.0 实现旋转木马】
文章图片

使用了swiper组件
html部分代码

文章图片国省干道文章图片自行车系统文章图片桥梁文章图片城市快速路文章图片结果集成文章图片高速公路文章图片自行车系统

> import { onMounted } from "vue"; import Swiper, { Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation, } from "swiper"; Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]); // swiper-bundle.min.css 决定了小圆点和左右翻页，如果不需要可以不引用 import "swiper/swiper-bundle.min.css"; // swiper.less/sass/css 决定了基础的样式 import "swiper/swiper.min.css"; export default { setup() { onMounted(() => { new Swiper(".swiper1", { // 循环 loop: true, //每张播放时长3秒，自动播放 spaceBetween: 40, effect: "coverflow", grabCursor: true, centeredSlides: true, slidesPerView: 5, // autoplay: { //delay: 3000, //stopOnLastSlide: false, //disableOnInteraction: false, // }, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, coverflowEffect: { rotate: 0, stretch: 0, depth: 100, modifier: 1, slideShadows: false, } }); }); }, methods:{ jumpUrl1(){ const routeData = https://www.it610.com/article/this.$router.replace({ path:'/index', }); // window.open(routeData.href, '_blank'); } } }