vue-cloud-carousel

基于Vue 2.x开发的高性能3D景深轮播组件

Features

• 支持 Vue 2.x
• 很快
• 好使
• (可选) 支持点击选中
• (可选) 支持自动播放
• 支持 requestAnimationFrame
• 支持 CSS transforms (浏览器支持列表)

文档

基本用法

安装

npm install vue-cloud-carousel

引入

// main.js (global)
import { CloudCarousel, CloudCarouselItem } from 'vue-cloud-carousel'

Vue.use(CloudCarousel);
Vue.use(CloudCarouselItem);

// 或者

// xxx.vue (component)
import { CloudCarousel, CloudCarouselItem } from 'vue-cloud-carousel'

export default {
    name: 'example',
    components: { CloudCarouselItem, CloudCarousel},
    data() {
        return {
            key: 'value'
        }
    }
};

template:

<div id="carousel">
    <cloudCarousel :options="options">
        <cloud-carousel-item>
            <img class="carousel-item" src="./assets/browsers/firefox.png" alt="Firefox">
        </cloud-carousel-item>
        <cloud-carousel-item>
            <img class="carousel-item" src="./assets/browsers/wyzo.png" alt="Firefox">
        </cloud-carousel-item>
        <cloud-carousel-item>
            <img class="carousel-item" src="./assets/browsers/chrome.png" alt="Firefox">
        </cloud-carousel-item>
        <cloud-carousel-item>
            <img class="carousel-item" src="./assets/browsers/safari.png" alt="Firefox">
        </cloud-carousel-item>
        <cloud-carousel-item>
            <img class="carousel-item" src="./assets/browsers/iexplore.png" alt="Firefox">
        </cloud-carousel-item>
    </cloudCarousel>
</div>

script:

export default {
    name: 'app',
    data() {
        return {
            options: {
                yOrigin: 42,
                yRadius: 48,
                autoPlay: 1,
                bringToFront: true
            },
        };
    }
};

Carousel options

Basic methods:

运行示例

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build