实现一个旋转木马样式的轮播

半糖1122

已于 2024-02-22 09:15:21 修改

阅读量455

点赞数 2

文章标签： vue.js

于 2024-02-21 15:42:27 首次发布

本文链接：https://blog.csdn.net/tzz_1122/article/details/136213363

版权

本文介绍了如何在Vue项目中使用vue-carousel-3d插件创建一个具有3D效果的图片轮播组件，展示了HTML模板、JavaScript代码和CSS样式，以及如何通过点击事件跳转到详细页面。

摘要由CSDN通过智能技术生成

最终实现成果

代码

使用了vue-carousel-3d插件

npm install -S vue-carousel-3d

<template>
  <div class='cultureCarousel'>
    <img src="../../img/culture/fazhan.png" alt="" style="width: 100%; height: 200px;margin-bottom: 20px;" />
    <div class="box" v-if="list?.length>0">
      <carousel-3d :perspective="35" :display="5" :width="250" :height="400" :space="50">
        <slide v-for="(item, i) in list" :index="i" :key="i" >
          <template slot-scope="obj">
            <div class="con" @click="imgClick(item,obj)">
              <img :src="item.img_path" />
              <div class="title">{{ item.title }}</div>
              <div class="text">{{ item.abstract }}</div>
            </div>
            
          </template>
        </slide>
      </carousel-3d>
    </div>
  </div>
</template>

//js部分
<script>
  import { Carousel3d, Slide } from 'vue-carousel-3d'
  /* eslint-disable */
  export default {
    components: { Carousel3d, Slide },
    props: {
      info: {
        type: Object,
        default: () => {},
      },
    },
    computed:{
      list(){
        return this.info.child
      },
    },
    data() {
      return {
      }
    },

    methods: {
      imgClick(item,obj) {
        if(obj.isCurrent){
          const { href } = this.$router.resolve({
            name: 'NewsDetails', 
            query:{main_uuid:item.main_uuid}
          })
          window.open(href, '_blank')
        }
        
      },
    },
  }
</script>

//css部分
<style lang="less" scoped>
  .left-1 {
    transform: translateX(-400px) translateZ(-400px) rotateY(-35deg) !important;
  }
  .right-1 {
    transform: translateX(400px) translateZ(-400px) rotateY(35deg) !important;
  }
.cultureCarousel{
  height: 100%;
  .box{
    height: calc(100% - 240px);
  }
  .con{
    padding: 25px;
    img{
      height: 140px;
    }
  }
  .text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;

    line-height: 1.5;
    color: black;
    font-size: 16px;
  }
  .title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 80px;
    color: #F19855;
  }

  .carousel-3d-slide{
    background-color: #F3F3F3 !important;
  }
  .current{
    background-color: #F8E8DB !important;
    border:1.5px solid #F19855 !important;
  }
}
  
</style>