v-carousel-lucky v1.0.2

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

Event