vue3.0 实现旋转木马

做的比较丑最后图片

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

使用了swiper组件
html部分代码

  <div class="swiper-container swiper1" style="height: 650px;width: 1500px"><div class="swiper-wrapper"><div class="swiper-slide"><div class="box-card"><img src="../../assets/homeScroll/trunkRoad.png" alt="" /><br><el-button type="primary" @click="jumpUrl1">国省干道</el-button></div></div><div class="swiper-slide"><div class="box-card"><img src="../../assets/homeScroll/bikeSystem.png" alt="" /><br><el-button type="primary" @click="jumpUrl2">自行车系统</el-button></div></div><div class="swiper-slide"><div class="box-card"><img src="../../assets/homeScroll/bridge.png" alt="" /><br><el-button type="primary">桥梁</el-button></div></div><div class="swiper-slide"><div class="box-card"><img src="../../assets/homeScroll/cityExpressway.png" alt="" /><br><el-button type="primary">城市快速路</el-button></div></div><div class="swiper-slide"><div class="box-card"><img src="../../assets/homeScroll/resultIntegration.png" alt="" /><br><el-button type="primary" @click="jumpUrl3">结果集成</el-button></div></div><div class="swiper-slide"><div class="box-card"><img src="../../assets/homeScroll/trunkRoad.png" alt="" /><br><el-button type="primary">高速公路</el-button></div></div><div class="swiper-slide"><div class="box-card"><img src="../../assets/homeScroll/bikeSystem.png" alt="" /><br><el-button type="primary" @click="jumpUrl2">自行车系统</el-button></div></div></div><!-- 如果需要分页器 --><!--      <div class="swiper-pagination"></div>--><div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。--><div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。--></div>


<script>
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 = this.$router.replace({path: '/index',});// window.open(routeData.href, '_blank');}}
}
</script>

vue3.0 实现旋转木马相关推荐

vue3.0环境搭建
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜,一直下一步到完成 -------------------------------------- ...
VUE3.0 二. vue-cli3 配置指南
VUE3.0 二. vue-cli3配置指南一.vue.config.js 详解官网地址: https://cli.vuejs.org/zh/config/ 使用vue3 的时候需要添加一个vue ...
VUE3.0 一.安装node.js、vue3.0脚手架
VUE3.0 一.安装node.js.vue3.0脚手架 1.安装nodejs 首先去官网下载nodejs 查看npm和node版本,出现版本号即安装成功. npm -v # 6.13.4node - ...
vue 不识别svg_vue中引用svg，vue引入svg不显示，vue引用svg配置，vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
使用vue3.0和element实现后台管理模板
通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有 ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
【Vue】Docker + Nginx 部署 Vue3.0 项目
Docker + Nginx 部署 Vue3.0 项目 1.用指令 npm run build 打包vue.js项目(该项目是在WebStorm里面新建的Vue空项目). 打包成功后,会生成一个目录d ...
vue3.0实现原理
vue3.0.js ------------------ function Vue(option){ this.$el = document.querySelector(option.el); // ...

vue3.0 实现旋转木马

vue3.0 实现旋转木马相关推荐

最新文章

热门文章