Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 2 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 (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T08:53:58.000Z (3 months ago)
- Last Synced: 2024-10-29T09:55:36.653Z (3 months ago)
- Topics: carousel, carousel-slider, hacktoberfest, hacktoberfest-2023, javascript, slider, vue, vue3
- Language: TypeScript
- Homepage: https://vue3-carousel.ismail9k.com/
- Size: 3.74 MB
- Stars: 726
- Watchers: 4
- Forks: 173
- Open Issues: 58
-
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)
- trackawesomelist - vue3-carousel (⭐757) - A highly customizable, lightweight Vue 3 carousel component for your next awesome project. (Recently Updated / [Dec 23, 2024](/content/2024/12/23/README.md))
README
# Vue 3 Carousel
Modern lightweight Vue 3 carousel component
## Documentation
https://vue3-carousel.ismail9k.com/
## 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
- [x] Vertical Slides## Nuxt Module
If you're using Nuxt and prefer to use it via module, please refer to [vue3-carousel-nuxt](https://github.com/gaetansenn/vue3-carousel-nuxt?tab=readme-ov-file)
## 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
// 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'const config = {
itemsToShow: 1.5
}
{{ slide }}
```