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

Vue 3 carousel component
https://github.com/ismail9k/vue3-carousel

carousel carousel-slider hacktoberfest hacktoberfest-2023 javascript slider vue vue3

Last synced: 3 months ago
JSON representation

Vue 3 carousel component

• Host: GitHub
• URL: https://github.com/ismail9k/vue3-carousel
• Owner: ismail9k
• License: mit
• Created: 2020-04-25T18:00:18.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-04T12:26:32.000Z (7 months ago)
• Last Synced: 2024-04-11T18:32:59.486Z (7 months ago)
• Topics: carousel, carousel-slider, hacktoberfest, hacktoberfest-2023, javascript, slider, vue, vue3
• Language: TypeScript
• Homepage: https://ismail9k.github.io/vue3-carousel/
• Size: 2.19 MB
• Stars: 637
• Watchers: 4
• Forks: 161
• Open Issues: 48
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-3 - vue3-carousel - Modern lightweight carousel component built for Vue 3. (Packages)

README

        
# Vue 3 Carousel

Modern lightweight Vue 3 carousel component



  

  

  



## Documentation

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

## Features

- [x] Responsive breakpoints

- [x] Mouse/touch dragging

- [x] Infinity scroll (wrapping around)

- [x] Auto play

- [x] Add classes for active and for visible slides

- [x] RTL

- [x] Enrich a11y

## Getting started

### Installation

First step is to install it using `yarn` or `npm`:

```bash

npm install vue3-carousel

# or use yarn

yarn add vue3-carousel

```

### Basic Using

```vue

  

    

      {{ slide }}

    

    

      

      

    

  

// 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,

  },

}

```