vue-carousel-3d

 vue-carousel-3d插件

 

1.介紹：是一款vue的3D輪播圖插件，插件文檔地址    https://wlada.github.io/vue-carousel-3d/

1.1.安裝以及使用

// 安裝

npm install -S vue-carousel-3d

// 使用的倆種方式

// 方式一全局注冊

import Vue from 'vue'

import Carousel3d from 'vue-carousel-3d'

Vue.use(Carousel3d)


// 方式二組件局部注冊

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

export default {

    components: {
        Carousel3d,
        Slide
    }
}

 

1.2.html部分

 

<template>

    <!--具體參數的配置請仔細查看文檔-->

  <carousel-3d
    :autoplay="true"
    :autoplayTimeout="3000"
    :perspective="35"
    :display="5"
    :animationSpeed="1000"
    :width="300"
    :height="270"
    controlsVisible
    :controlsHeight="60"
  >
    <slide v-for="(item, i) in slides" :index="i" :key="i">
        
        <!--通過插槽作用域可以拿到點擊的圖片的索引-->
      <template slot-scope="obj">
        <img @click="imgClick(obj)" :src="item.src" alt="">
      </template>

    </slide>
  </carousel-3d>
</template>

 

 

 

 

1.3.js邏輯部分

 

<script>

export default {

    data () {

        return {

            slides: [

                {
            
                    src: 'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg'
                }
            ]
        }
    }
}

</script>