Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

infinite-carousel-vue

letrungtan93MIT1.0.5TypeScript support: included

A flexible, lightweight, touch & wipe support carousel library for Vue 3, supporting infinite loop mode.

vue, carousel, infinite carousel, vue infinite carousel, vue slider

readme

infinite-carousel-vue

A flexible, lightweight, touch & wipe support carousel library for Vue 3, supporting infinite loop mode.

Installation

NPM

$ npm i infinite-carousel-vue

Use the component.

import { InfiniteCarousel, Slide } from 'infinite-carousel-vue'

Usage

Basic Usage

<InfiniteCarousel 
    :itemPerSlide="1"
    :itemPerMove="1"
    infinite
    infiniteOnWipe
>
    <Slide 
        v-for="(item, index) in ['Item 1', 'Item 2', 'Item 3']"
        :key="index"
    >
        {{ item }}
    </Slide>
</InfiniteCarousel>

Props

Name Type Default Description
itemPerSlide Number 1 The number of items to show per slide.
itemPerMove Number 1 The number of items to move per slide when navigating.
duration Number 500 The duration of the transition in milliseconds.
height String '' Specifies the height of the carousel viewport.
className String '' Optional CSS class to add custom styling to the carousel container.
showPagination Boolean true Determines whether dot pagination controls should be visible.
showNavigation Boolean true Controls whether navigation arrows (previous/next) are displayed.
infinite Boolean true Enables infinite scrolling. When true, the carousel will loop back to the first slide after reaching the last and vice versa.
infiniteOnWipe Boolean true Enables infinite scroll behavior even when the user swipes manually (e.g., on mobile).
noBoundaries Boolean false If true, the carousel will allow scrolling past the boundaries on one move (fixed item per move). If false, it will stop at the last or first item.
autoplay Boolean false Enables automatic sliding of slides.
autoplayInterval Number 2000 The interval (in ms) between slides when autoplay is enabled.
autoplayDirection String 'forward' The direction of autoplay ('forward' or 'backward').

Events

Event Name Type Description
itemChange Number Emitted when moving to another item.
slideChange Number Emitted when moving to another slide.