vue-awesome-swiper实现3D效果

作者: 臭臭的胡子先生 | 来源:发表于2021-03-16 17:40 被阅读0次

vue-awesome-swiper实现3D效果
vue-awesome-swiper实现3d轮播图
vue vue-awesome-swiper 轮播
css实现简单的3D效果
vue-cli中使用vue-awesome-swiper跑马灯效
vue中使用vue-awesome-swiper自定义按钮
shader中制作简易3d绘制
Flutter 实现酷炫的3D效果
随手收集
微信小程序实现打卡（翻转效果）

首先安装swiper跟vue-awesome-swiper 要注意安装版本

npm install vue-awesome-swiper@4.1.1 --save
npm install swiper@4.5.1 --save

实际效果展示

胡子先生 2021-03-03 17.20.39.gif

具体的代码我封装成一个组件了，直接上代码

<template>
  <div class="DetailsContent">
    <div class="poster_dv">
      <swiper ref="mySwiper" :options="swiperOption" v-if="posterObj.length > 0">
        <swiper-slide class="poster_item" v-for="(item, index) in posterObj" :key="index">
          <img :src="item.imgUrl" alt="" />
        </swiper-slide>
      </swiper>
      <!--以下看需要添加-->
      <div class="swiper-pagination"></div>
      <!-- 下一页 -->
      <div class="swiper-button-next"></div>
      <!-- 上一页 -->
      <div class="swiper-button-prev"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    let that = this;
    return {
      posterObj: [
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
        {imgUrl:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F35%2F34%2F19300001295750130986345801104.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618477927&t=30da8b4a371f6d0aafb7e3f61a926f62"},
      ],
      swiperOption: {
        effect: "coverflow",
        coverflowEffect: {
          rotate:80,
          stretch: 10,
          depth: 60,
          modifier: 2,
          slideShadows : true
        },
        loop: true, // 无限循环
        observer: false, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: false, //修改swiper的父元素时，自动初始化swiper
        slidesPerView: "auto", // 设置可视区一共显示几张图片,设置auto,设置auto为自适应;
        centeredSlides: true, // 设置为true时,带有active-slide类名的图片会居中
        loopAdditionalSlides: 0, //loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。默认为0，前后各复制1个。0,1,2 --> 2,0,1,2,0
          //  页码
         pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          dynamicMainBullets: 2, //动态分页器的主指示点的数ss量
          clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        },
        //  点击上一页 下一页
        navigation: {
          nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
          prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
          hideOnClick: true, //点击slide时显示/隐藏按钮
          disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
          hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
        },
        on: {
          slideChangeTransitionEnd: function() {
            console.log('当前index+',this.realIndex)
            that.realIndex = this.realIndex
          }
        },
      },
      realIndex: 0,
    };
  },
  methods: {
    // 跳转到指定页面
    swiperSlideTo(index){
      this.$refs.mySwiper.$swiper.slideTo(index, 0, true);
    }
  },
};
</script>
<style lang="less" scoped>
.DetailsContent {
  width: 100%;
  height: 100%;
}
/deep/ .swiper-container-3d {
  perspective: 600px;
  height: 269px;
  padding-top: 18px;
}
.swiper-slide-prev {
  transform: translate3d(78px, 0px, 138px) rotateX(0deg) rotateY(65deg) scale(1) !important;
}
.swiper-slide-next {
  transform: translate3d(-78px, 0px, 138px) rotateX(0deg) rotateY(-65deg) scale(1) !important;
}
.poster_dv {
  width: 100%;
  height: 269px;
  position: relative;
  .poster_item {
    width: 295px;
    height: 215px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}

.swiper-pagination {
  padding: 0 12px 0 7px;
  height: 13px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 7px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
/deep/ .swiper-pagination-bullet-active {
  background: #fff !important;
}
/deep/ .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  opacity: 1;
  background: #d3b987;
  border-radius: 50%;
  display: block;
  margin-left: 5px;
}
.swiper-button-next {
  width: 32px;
  height: 269px;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
}
.swiper-button-prev {
  width: 32px;
  height: 269px;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
}
</style>

如果需要改变两边的图片角度，在css中找到 swiper-slide-prev，swiper-slide-next 类名修改下图的参数即可调整角度

image.png
swiper参数详解可以点击查看

vue-awesome-swiper实现3D效果
首先安装swiper跟vue-awesome-swiper 要注意安装版本实际效果展示具体的代码我封装成一个组...
vue-awesome-swiper实现3d轮播图
vue-awesome-swiper实现3d轮播图写了好几个有关vue的移动端的项目，好多轮播样式都是3d的，所...
vue vue-awesome-swiper 轮播
这里实现的是swiper效果：异形的slide vue-awesome-swiper是基于swiper的，安装不同...
css实现简单的3D效果
css实现简单3D房间效果纯3D效果实现上述效果，总体思路就是旋转容器，为容器贴纸。这是一个简单的3D立方体空...
vue-cli中使用vue-awesome-swiper跑马灯效
在vue-cli中使用swiper实现匀速无缝滚动效果图 1.安装vue-awesome-swiper 2.全局...
vue中使用vue-awesome-swiper自定义按钮
vue中使用vue-awesome-swiper实现轮播记录 vue-awesome-swiper安装安装好之后...
shader中制作简易3d绘制
在游戏开发中近大远小的效果是3d图形所呈现的基本效果，那我们如何在着色器中实现3d的效果呢，实现的方式有多种形式，...
Flutter 实现酷炫的3D效果
老孟导读：此文讲解3个酷炫的3D动画效果。下面是要实现的效果： Flutter 中3D效果是通过 Transfo...
随手收集
one div实现icon one div 实现动态天气 css实现文字3D CSS实现文本干扰效果 CSS实现文...
微信小程序实现打卡（翻转效果）
1.实现效果 2.实现原理 perspective定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D ...