基于Vue3实现旋转木马动画效果

做的比较丑 最后图片

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

效果图

实现代码

使用了swiper组件

html部分代码

  

      

        

          

            
            

            国省干道
          
        
        

          

            
            

            自行车系统
          
        
        

          

            
            

            桥梁
          
        
        

          

            
            

            城市快速路
          
        
        

          

            
            

            结果集成
          
        
        

          

            
            

            高速公路
          
        
        

          

            
            

            自行车系统
          
        
      
      
      

      

      
      

      
    

js部分代码

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');
    }
  }
}

到此这篇关于基于Vue3实现旋转木马动画效果的文章就介绍到这了,更多相关Vue旋转木马内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！