vue 3d旋转轮播图

vue 3d旋转轮播图

step1:添加依赖

npm i vue-carousel-3d

step2: 引入项目

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Carousel3d from 'vue-carousel-3d'

Vue.use(Carousel3d)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

step3: hello.vue

<template>
  <div>
    <carousel-3d :autoplay="true" :autoplay-timeout="3000" :display="5">
      <slide v-for="(photo,i) in photos" :index="i" :key="i">
        <template slot-scope="{index,isCurrent,leftIndex,rightIndex}">
          <img class="spin_img" :src="photo.url" :data-index="index"
               :class="{current: isCurrent, onLeft:(leftIndex>=0), onRight:(rightIndex>=0)}">
        </template>
      </slide>
    </carousel-3d>
    <carousel-3d
        :disable3d="true" :width="60" :height="60" dir="ltr" :startIndex="0" :clickable="false" :border="0"
        :display="5" :space="70" :controlsVisible="true" style="width:412px;">
      <slide v-for="(photo,i) in photos" :index="i" :key="i">
        <template slot-scope="{index,isCurrent,leftIndex,rightIndex}">
          <img class="badge_img" :src="photo.url" :data-index="index"
               :class="{current: isCurrent, onLeft:(leftIndex>=0), onRight:(rightIndex>=0)}">
        </template>
      </slide>
    </carousel-3d>
    <carousel-3d
        :animationSpeed="500"
        :controls-visible="true">
      <slide v-for="(photo,i) in photos" :index="i" :key="i">
        <template slot-scope="{index,isCurrent,leftIndex,rightIndex}">
          <img class="spin_img" :src="photo.url" :data-index="index"
               :class="{current: isCurrent, onLeft:(leftIndex>=0), onRight:(rightIndex>=0)}">
        </template>
      </slide>
    </carousel-3d>
    <carousel-3d ref="carousel" :count="photos.length" :border="0" :perspective="0"
                 :controls-visible="true" :controls-prev-html="'&#10092;'"
                 :controls-next-html="'&#10093;'" :controls-width="30"
                 :controls-height="160" :width="600" :height="250" :display="1" :inverseScaling="0"
                 :startIndex="photos.length/2">
      <slide v-for="(photo,i) in photos" :index="i" :key="i">
        <template slot-scope="{index,isCurrent,leftIndex,rightIndex}">
          <img class="spin_img" :src="photo.url" :data-index="index"
               :class="{current: isCurrent, onLeft:(leftIndex>=0), onRight:(rightIndex>=0)}">
        </template>
      </slide>
    </carousel-3d>
  </div>
</template>

<script>
import {Carousel3d, Slide} from 'vue-carousel-3d'

export default {
  name: 'Userprofile',
  components: {
    Carousel3d,
    Slide,
  },
  data() {
    return {
      photos: [
        {url: 'http://www.fjjgdj.gov.cn/images/2021-07/24/68d8b282-9951-4120-8981-cd30d0730be1.jpg',},
        {url: 'http://www.fjjgdj.gov.cn/images/2021-07/06/22378766-6709-4b31-80af-b641ccf9829d.jpg',},
        {url: 'http://www.fjjgdj.gov.cn/images/2021-08/13/81f2483d-a16c-47d7-8eed-5bc576eb5110.jpg',},
        { url: 'http://www.fjjgdj.gov.cn/images/2021-07/02/da802d9b-85b4-4e95-a982-3dcabb5fd95e.jpg',},
        {url: 'http://www.fjjgdj.gov.cn/images/2021-07/16/65de3133-e528-4936-8f62-3c2be189761e.jpg',}],
    }
  },
}
</script>
<style lang="scss" scoped>
.badge_img {
  height: 60px;
}
.spin_img {
  width: 100%;
  height: 100%;
}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvHLSeyU-1632276039946)(F:\document\test.assets\image-20210917112701090.png)]