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: 4 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 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T08:53:58.000Z (about 1 year ago)
- Last Synced: 2024-10-29T09:55:36.653Z (about 1 year 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
## ✨ Features
- 📱 **Responsive** - Breakpoints support
- 🔄 **Infinite Scroll** - Wrap around sliding
- 🖱️ **Mouse/Touch** - Dragging support
- 🖲️ **Mouse Wheel** - Scroll navigation support
- ⚡ **Auto Play** - Automatic sliding
- 🎯 **Slide Classes** - Active & visible states
- 🌐 **RTL** - Right-to-left support
- ♿ **A11y** - Keyboard navigation & ARIA labels
- 📊 **Vertical** - Vertical sliding mode
## 🚀 Installation
```bash
# npm
npm i vue3-carousel
# yarn
yarn add vue3-carousel
# pnpm
pnpm install vue3-carousel
```
## 📖 Basic Usage
```vue
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
const carouselConfig = {
itemsToShow: 2.5,
wrapAround: true
}
{{ slide }}
```
## 📚 Documentation
Visit our [documentation website](https://vue3-carousel.ismail9k.com/) for detailed usage and examples:
- [Getting Started](https://vue3-carousel.ismail9k.com/getting-started)
- [Carousel Configuration](https://vue3-carousel.ismail9k.com/config)
- [Carousel Component](https://vue3-carousel.ismail9k.com/components/carousel)
- [Slide Component](https://vue3-carousel.ismail9k.com/components/slide)
- [Navigation Component](https://vue3-carousel.ismail9k.com/components/navigation)
- [Pagination Component](https://vue3-carousel.ismail9k.com/components/pagination)
## 💚 Nuxt Module
For Nuxt users, check out [vue3-carousel-nuxt](https://github.com/gaetansenn/vue3-carousel-nuxt) module.