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"