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

选项	描述	默认值
xOrigin	轮播中心点横向坐标	(组件宽度 / 2)
yOrigin	轮播图中心点纵向坐标	(组件高度 / 10)
xRadius	轮播图横向半径	(组件宽度 / 2.3)
yRadius	轮播图纵向半径	(组件高度 / 6)
skewY	轮播图Y轴倾斜角度（deg）	0
farScale	距离当前活动元素最远的元素的缩放比例（0-1）	0.5
farOpacity	距离当前活动元素最远的元素的透明度（0-1）	0.5
transforms	如果浏览器支持的话，是否使用原生 CSS 的 transform 属性	true
smooth	如果浏览器支持的话，是否通过 requestAnimationFrame API 使用最大帧率	true
fps	如果 smooth 为 false 时，每秒帧数	30
speed	元素移动速度: 1 最慢, 4 中等, 10 最快	4
autoPlay	是否开启自动轮播： 0 关闭；如果鼠标移至轮播图上，自动轮播将暂停。 查看: autoPlayDelay	0
autoPlayDelay	两次自动轮播之间的时间间隔，单位毫秒	4000
bringToFront	是否支持将鼠标点击元素设置为当前活动元素	false

Basic methods:

方法	描述	参数
go( count )	设置距离当前活动元素的第count个元素为最前方的活动元素	count: 距离当前活动元素的个数 (+ 正向, - 反向)
goTo( index )	设置列表中第index个元素为最前方的活动元素	index: 元素在元素列表中的索引
getNearestItem()	获取最前方活动元素的组件实例 (CloudCarouselItem)	none
getNextItem()	获取自动轮播中下一个活动元素的组件实例 (CloudCarouselItem)	none
getPrevItem()	获取自动轮播中上一个活动元素的组件实例 (CloudCarouselItem)	none
goPrev()	移至上一个元素	none
goNext()	移至下一个元素	none
setOptions( options )	重置设置项	options: 查看 Carousel options

运行示例

# install dependencies
npm install

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

# build for production with minification
npm run build