Infinite carousel for Vue 3

This package allows you to implement infinite scrolling for any of your Vue components. Supports vertical and horizontal axis, custom items and speed.

Usage

Use globally:

In main.ts

import { InfiniteCarousel, InfiniteCarouselItem } from "vue-infinite-carousel";
import "vue-infinite-carousel/dist/vue-infinite-carousel.css" 

const app = createApp(App);
app.component("InfiniteCarousel", InfiniteCarousel);
app.component("InfiniteCarouselItem", InfiniteCarouselItem);
app.mount("#app");

<script setup>
// ...
const items = ref(["Item 1", "Item 2", "Item 3"]);
// ...
</script>

<template>
  <InfiniteCarousel :gap="20" :speed="50">
    <template v-for="item in items">
      <InfiniteCarouselItem>
        {{ item }}
      </InfiniteCarouselItem>
    </template>
  </InfiniteCarousel>
</template>

Use locally:

<script setup>
import {InfiniteCarousel, InfiniteCarouselItem} from 'vue-infinite-carousel'
import "vue-infinite-carousel/dist/vue-infinite-carousel.css" 
// ...
const items = ref(["Item 1", "Item 2", "Item 3"]);
// ...
</script>

<template>
  <InfiniteCarousel :gap="20" :speed="50">
    <template v-for="item in items">
      <InfiniteCarouselItem>
        {{ item }}
      </InfiniteCarouselItem>
    </template>
  </InfiniteCarousel>
</template>

Available props

| Name | Type | Description | Default value | | :--- | :--- | :--- | :---: | | speed | Number | Scrolling speed | 50 | gap | Number | Padding-right of each element | 20 | axis | "horizontal" | "vertical" | Axis of carousel | "horizontal" | direction | "left" | "right" | "up" | "down | Direction of carousel. Left, right - only for horizontal, up, down - for vertical axis. | "left"