美文网首页
vue-awesome-swiper实现3D效果

vue-awesome-swiper实现3D效果

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

    首先安装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效果

          本文链接：https://www.haomeiwen.com/subject/vavdcltx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|vue-awesome-swiper实现3D效果|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！