swiper3D

最新推荐文章于 2025-05-23 16:39:32 发布

原创最新推荐文章于 2025-05-23 16:39:32 发布 · 611 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用vue-awesome-swiper插件在Vue项目中实现3D棱柱体轮播效果，包括安装配置、代码示例及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue-awesome-swiper（3D棱柱体轮播（正方体））

参考网站：

https://www.swiper.com.cn/api/index.html

npm install vue-awesome-swiper --save     //--save(相对路径，本文件夹下安装)

将swiper引入main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);

在组件中使用

模板中的：

<div class="index">
    <swiper :options="swiperOption">
        <swiper-slide><img src="@/assets/img/startPage1.jpg" alt=""></swiper-slide>
        <swiper-slide><img src="@/assets/img/startPage1.jpg" alt=""></swiper-slide>
        <swiper-slide><img src="@/assets/img/startPage1.jpg" alt=""></swiper-slide>
        <!-- 分页器 -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
 </div>

script中的：

export default {
    data() {
      return {
        swiperOption: {
          autoplay: {
              delay: 3000,
              stopOnLastSlide: true,
              disableOnInteraction: false,
            }, //自动播放
          pagination: {
            el: '.swiper-pagination', //分页器
          },
          effect : 'cube', //3D正方体轮播（棱柱体不一定是正方体）
          cubeEffect: {
            slideShadows: true,
            shadow: true,
            shadowOffset: 100,
            shadowScale: 0.6
          }
        }
      }
    }
  }

style中的：

 .index{
    height: 100%
    width: 100%
  }
  img{
     height: 100%
     width: 100%
   	 vertical-align top
   }