引水方知开源不易

与朋友首次开源了一个轮播插件，希望大家积极品尝

介绍

基于 vue3 composition api 编写的轮播插件，多种属性适配，轮播内容 可完全自定义，基本可以满足大部分的轮播需求。

基本功能介绍：

• 是否开启自动轮播，自定义轮播时间
• 鼠标移入后暂停轮播，鼠标移出后重置轮播
• 点击 左侧/右侧 切换按钮，手动切换
• 点击 底部轮播指示器，手动切换
• 切换按钮 与 轮播指示器，可设置 hover 展示
• 左侧切换向左滚动，右侧切换向右滚动
• ...

在线Demo：正在制作...

安装

npm install v3-carousel

or

yarn add v3-carousel

使用

main.js

import { createApp } from "vue";
import App from "./App.vue";
import Carousel from "v3-carousel"; // 引入

const app = createApp(App)
app.use(Carousel).mount('#app') // 使用

注意点：将你需要显示的图片使用CarouselItem包裹起来（创建CarouselItem暂时必须使用v-for循环完成，因为我需要使用到idx来操作），完成之后你还需要将这些CarouselItem用一个大的Carousel包裹起来，再给Carousel添加你需要的属性，好了，到这里一个实例就完成了，你可以去网页上查看轮播图了

App.vue

<template>
  <div class="app">
    <Carousel
      :autoplay="true"
      :duration="2000"
      :initIndex="2"
      :direction="true"
      directionMode="hover"
      :directionSize="20"
      directionColor="skyblue"
      :indicator="true"
      indicatorMode="always"
      indicatorColor="white"
      indicatorActiveColor="skyblue"
      @before-moving="beforeMoving"
      @after-moving="afterMoving"
    >
      <CarouselItem v-for="(item, index) in data" :key="index" :idx="index">
        <img :src="item" />
      </CarouselItem>
    </Carousel>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const state = reactive({
      data: [
        "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00693-2745.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2190440116,1436403087&fm=26&gp=0.jpg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3593656793,3600757928&fm=26&gp=0.jpg",
      ],
    });

    function beforeMoving(dire) {
      console.log("before", dire);
    },
    function afterMoving(obj) {
      console.log("after", obj);
    },

    return {
      ...toRefs(state),
      beforeMoving,
      afterMoving,
    };
  },
});
</script>

参数

Carousel 组件选项（Props）

Carousel 事件（Event）

CarouselItem 组件选项（Props）

目前维护者: 淳淳同学

• 个人博客
• Github
• 掘金

使用如果出现问题欢迎来讨论，觉得好用的话就点个 star 吧，o(￣▽￣)o

有什么建议欢迎大佬们提交 pr，谢谢！

相关链接

• npm package
• github repo

祝君无Bug~