1.0.2 • Published 3 years ago

v-carousel-lucky v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

v-carousel-lucky

vue3版本的走马灯

安装

npm install v-carousel-lucky --save

全局引入

main.js中:

import { createApp } from 'vue'
import App from './App.vue'
//引入css文件
import "v-carousel-lucky/dist/style.css"
// 引入组件
import vCarouselLucky from 'v-carousel-lucky'
const app = createApp(App);
app.use(vCarouselLucky)
app.mount("#app")

局部引入

在你需要使用的组件里面引入:

import { Carousel, CarouselItem } from 'v-carousel-lucky'
import "v-carousel-lucky/dist/style.css"

使用案例:

<script setup>
import { Carousel, CarouselItem } from 'v-carousel-lucky'
import "v-carousel-lucky/dist/style.css"

function beforeMoving(before) {
  console.log("before", before);
}
function afterMoving(after) {
  console.log("after", after);
}
</script>

<template>
  <div class="app">
    <carousel 
    :autoplay="true" 
    :duration="5000" 
    :initIndex="0" 
    :direction="true" 
    directionMode="hover" 
    :indicator="true"
    indicatorMode="always" 
    :loop="true" 
    type="card"  
    :delay="500"
    @before-move="beforeMoving" 
    @change-move="afterMoving">
      <carousel-item v-for="item in 3" :key="item" class="item">
        <div class="h">{{ item }}</div>
      </carousel-item>
    </carousel>
  </div>
</template>

<style scoped>
.app {
  width: 500px;
  height: 300px;
}

.h,
.item {
  width: 100%;
  height: 100%;
}

.item:nth-child(1) .h {
  background-color: rgb(198, 121, 22);
}

.item:nth-child(2) .h {
  background-color: rgb(74, 56, 33);
}

.item:nth-child(3) .h {
  background-color: rgb(39, 199, 68);
}
</style>

Attribute

名称介绍可选值默认值
width轮播的宽度-400px
height轮播的高度(不包含指示灯的高度)-300px
duration轮播延迟的时间-3000ms
autoplay是否自动轮播true/falsetrue
initIndex初始化展示的item-0(第一个)
direction是否展示切换按钮true/falsetrue
directionMode切换按钮展示的方式always/hoveralways
indicator指示灯是否展示true/falsetrue
indicatorMode指示灯展示方式always/hoveralways
indicatorPosition指示灯在外部还是内部inside/outsideinside
indicatorTrigger指示灯触发方式hover/clickhover
typecarousel的类型card-
loop是否循环轮播true/falsetrue
delay切换过渡时的事件-300
scale幻灯片缩小的比例小于10.8
cardWidth激活幻灯片的宽度小于整体宽度50%

Event

名称介绍参数
before-move目前激活幻灯片的前一个Object=>(index,direction)
change-move目前激活的幻灯片Object=>(index,direction)
1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago

0.0.0

3 years ago