vue3-carousel

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)
• Add classes for active and for visible slides
• 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).
currentSlide	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.