Package Exports

vue3-carousel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue 3 Carousel

Modern lightweight Vue 3 carousel component

Documentation

https://ismail9k.github.io/vue3-carousel/

TODO

Responsive breakpoints
Mouse/touch dragging
Infinity scroll (wrapping around)
Auto play
RTL
Vertical scroll
Sync multiple carousel
Enrich a11y

Getting started

Installation

First step is to install it using yarn or npm:

npm install vue3-carousel

# or use yarn
yarn add vue3-carousel

Basic Using

<template>
  <carousel :items-to-show="1.5">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    </slide>

    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</template>

<script>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

export default {
  name: 'App',
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
};
</script>

Available Props

Prop	Default	Description
`itemsToShow`	1	count of items to showed per view (can be a fraction).
`initialSlide`	0	index number of the initial slide.
`wrapAround`	false	enable infinite scrolling mode.
`snapAlign`	'center'	controls the carousel position alignment, can be 'start', 'end', or 'center'
`transition`	300	sliding transition time in ms.
`settings`	{ }	an object to pass all settings.
`breakpoints`	null	an object to pass all the breakpoints settings.