轮播组件

基于Vue的通用轮播组件，需搭配pb-vue-carousel-item使用，目前提供淡入、平移两种切换方式

安装

npm i pb-vue-carousel
或
yarn add pb-vue-carousel

基本使用

可通过Vue.use()全局注册

import Vue from 'vue'
import PbCarousel from 'pb-vue-carousel'
import PbCarouselItem from 'pb-vue-carousel-item'

Vue.use(PbCarousel)
Vue.use(PbCarouselItem)

也可在组件中局部引用

<template>
	<div class="app">
        <pb-carousel>
    		<pb-carousel-item v-for="item in 3" :key="item">
    			<div style="background: green;color: white">
                    {{ item }}
    			</div>
    		</pb-carousel-item>
    	</pb-carousel>
    </div>
</template>

<script>
import PbCarousel from 'pb-vue-carousel'
import PbCarouselItem from 'pb-vue-carousel-item'
export default {
    components: {
        PbCarousel,
        PbCarouselItem
    }
}
</script>

自定义指示器样式

<template>
  <div id="app">
    <carousel
      type="fade"
      height="300px"
      :custom-indicator-style="{
        width: '20px',
        height: '5px',
        background: 'yellow'
      }"
      :custom-indicator-active-style="{
        width: '10px',
        height: '10px',
        borderRadius: '50%',
        background: 'red'
      }"
    >
      <carousel-item
        v-for="item in 5"
        :key="item"
      >
        <div>
          {{ item }}
        </div>
      </carousel-item>
    </carousel>
  </div>
</template>

自定义切换按钮样式

<template>
  <div id="app">
    <carousel
      type="fade"
      height="300px"
      :custom-prev-button-style="{
        imageUrl: '../arrow-left.png',
        style: {
          width: '24px',
          height: '24px'
        }
      }"
      :custom-next-button-style="{
        imageUrl: '../arrow-right.png',
        style: {
          width: '24px',
          height: '24px'
        }
      }"
    >
      <carousel-item
        v-for="item in 5"
        :key="item"
      >
        <div>
          {{ item }}
        </div>
      </carousel-item>
    </carousel>
  </div>
</template>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------------------- | -------------------------- | ------------------------------------------------------------ | --------- | ------ | | interval | 轮播的切换时长 | number | — | 3000 | | height | 轮播容器的高度 | string | — | 150px | | type | 轮播切换的类型 | string | fade/move | fade | | show-indicator | 是否展示指示器 | boolean | — | true | | show-switch-button | 是否展示切换按钮 | boolean | — | true | | custom-prev-button | 自定义向前切换的按钮样式 | 只接受固定属性的object{imageUrl: string, style: object} | — | — | | custom-next-button | 自定义向后切换的按钮样式 | 只接受固定属性的object{imageUrl: string, style: object} | — | — | | custom-indicator-style | 自定义指示器样式 | object | — | — | | custom-indicator-active-style | 自定义激活状态的指示器样式 | object | — | — |