vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应

vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应

vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应

如图所示，这是一个大屏项目的3d轮播图效果，下面跟着我来详细实现这个轮播效果。官网地址：https://wlada.github.io/vue-carousel-3d/

如图所示，这是轮子工厂里面的vue-carousel-3d插件中的一些参数，文档。可以参考。地址：轮子工厂

npm install -S vue-carousel-3d

1、全局注册，main.js

import Vue from 'vue'
import Carousel3d from 'vue-carousel-3d'
Vue.use(Carousel3d

2、在组件中局部注册

import { Carousel3d, Slide } from "vue-carousel-3d";

export default {
  components: {
    Carousel3d,
    Slide,
  },
}

<template> 
  <div class="c_wrap">
    <div class="c_title">IT预算投入（万元）</div>
    <div class="c_carousel"></div>
    <carousel-3d
      :autoplay="true"
      :autoplayTimeout="3000"
      :display="5"
      :width="320"
      :height="334"
      :animationSpeed="1000"
    >
      <slide class="carousel_box" v-for="(item, index) in earthData" :key="index" :index="index">
        <div class="carousel_flashlight">
          <p>{{item.stext}}</p>
          <h3>{{item.sdescription}}</h3>
        </div>
      </slide>
    </carousel-3d>
  </div>
</template>

<script>
import { Carousel3d, Slide } from "vue-carousel-3d";
export default {
  components: {
    Carousel3d,
    Slide,
  },
  props: {
    earthData: {
      default: () => {
        return {};
      },
    },
  },
  data() {
    return { 
      earthData: [
        {
          stext: "标题1",
          sdescription: "1",
        },
        {
          stext: "标题2",
          sdescription: "2",
        },
        {
          stext: "标题3",
          sdescription: "3",
        },
        {
          stext: "标题4",
          sdescription: "4",
        },
        {
          stext: "标题5",
          sdescription: "5",
        },
      ],
    };
  }, 
};
</script>

.c_wrap {
  width: 100%;
  height: 370px;
  .c_title {
    width: 252px;
    height: 53px;
    line-height: 53px;
    text-indent: 37px;
    background: linear-gradient(270deg, rgba(45, 110, 251, 0) 0%, #2d6efb 100%);
    color: #fff;
    margin: 0 auto;
    font-size: 20px;
  }
}
.carousel_box {
  width: 100%;
  display: flex;
  .carousel_flashlight {
    flex: 1;
    height: 334px;
    background: url("~assets/img/pedestal.png") no-repeat center bottom;
    text-align: center;
    p {
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      color: #51e8ec;
      line-height: 28px;
    }
    h3 {
      font-size: 84px;
      font-family: "digital-7";
      text-align: center;
      color: #ffffff;
      line-height: 101px;
    }
  }
}

// 覆盖轮播样式
.carousel-3d-slide {
  background: none;
  border: 0px;
}

这样，一个简单的3d轮播图就完成了。但是，我们的项目是大屏项目，所以要实现轮播图的宽度随着浏览器窗口改变而改变。由于vue-carousel-3d中的每一项的宽度是固定写死。所以只能宽度设置成变量，再加获取浏览器的宽度，并根据浏览器宽度来改变轮播图单项变量的宽度。

created() {
  this.changeWidth();
},
mounted() {
  window.onresize = () => {
    this.changeWidth();
  };
},
methods: {
  //根据电脑分辨率设置轮播图宽度
  changeWidth() {
    if (
      document.body.clientWidth >= 1700 &&
      document.body.clientWidth < 1920
    ) {
      this.cWidth = 260;
    }
    if (
      document.body.clientWidth >= 1500 &&
      document.body.clientWidth < 1700
    ) {
      this.cWidth = 220;
    }
    if (document.body.clientWidth < 1500) {
      this.cWidth = 180;
    }
  },
},

这样，轮播图的单项就能根据浏览器窗口的变化来修改宽度，一个简单的自适应3D轮播图就做好了。

vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应相关教程

1. css简易轮播图
   

   css简易轮播图 效果 上代码 bodydiv class=bannerdiv class=contentimg src= img src= img src= /div/div/body style type=text/css.content img{width: 500px;float: left;}.content{width: 1500px;animation: my 3s infinite;/* 动画速度时间 */}.banner{wi

2. C++核心准则T.5：结合使用泛型和面向对象技术应该增强它们的效果
   

   C++核心准则T.5：结合使用泛型和面向对象技术应该增强它们的效果而不是成本 T.5: Combine generic and OO techniques to amplify their strengths, not their costs T.5：结合使用泛型和面向对象技术应该增强它们的效果而不是成本 Reason（原因） Generic and

3. 用spiwer容器写轮播图
   

   用spiwer容器写轮播图 swiper写轮播图，swiper是个滑块容器，indicator-dots生成小圆点，autoPlay自动切换，interval是切换的时间间隔，duration是动画的时长 view class=contain !--轮播图-- swiper class=home-swiper indicator-dots=true autoplay={{autop

4. JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，
   

   JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放 静态效果图如下： CSS部分 *{ margin: 0; padding: 0; } body{ user-select: none; } .banner{ position: relative; width: 384px; he

5. cocos2dx脱坑之旅 2 给 node sprite layer 添加拖到,触摸效果
   

   cocos2dx脱坑之旅 2 给 node sprite layer 添加拖到,触摸效果 kao，搜了一圈，都是几百年前写的狗时,一篇完整的代码都没有，只好写一篇来水一水。 local someTest = class(someTest)local scheduler = cc.Director:getInstance():getScheduler()function some

6. CSS动画效果
   

   CSS动画效果 CSS动画效果 美不美看效果 咋也不知道，咋也不敢问！ 效果如下： HTML部分代码： div class=img div class=img_in img src=../assets/images/1.jpg img src=../assets/images/2.jpg img src=../assets/images/3.jpg img src=../assets/images/4.j

7. 轮播图js首先获取要使用的元素创建index是图片的索引num是小圆点
   

   轮播图js首先获取要使用的元素，创建index是图片的索引，num是小圆点的索引，先实现自动滚因为默认向右滚所以向右滚和自动滚一样，通过建立计时器将封装好的自动滚函数导入，向左滚则与之相反让index 轮播图js首先获取要使用的元素，创建index是图片的索引，

8. JAVA实现Tom猫
   

   JAVA实现Tom猫 目录 一、效果 二、教程 三、代码 一、效果 首先我们先来看一下效果：（ 以下运行成功均动态效果 ） 我们点击左右两边的图标，Tom猫便可做出相应的动作，例如，点击 “牛奶” 这个图标，Tom猫的反应： 当然，点击Tom猫的小肚子和头也会出现做出