pb-vue-carousel v0.0.4

轮播组件

基于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