# Vue 3 Carousel
Modern lightweight Vue 3 carousel component
<p>
<a href="https://npm-stat.com/charts.html?package=vue3-carousel"><img src="https://img.shields.io/npm/dm/vue3-carousel.svg" alt="npm"/></a>
<a href="https://www.npmjs.com/package/vue3-carousel"><img src="https://img.shields.io/npm/v/vue3-carousel.svg" alt="npm"/></a>
<a href="https://packagequality.com/#?package=vue3-carousel"><img src="https://packagequality.com/shield/vue3-carousel.svg" alt="Package Quality"/></a>
</p>
## 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
<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>
```
没有合适的资源?快使用搜索试试~ 我知道了~
Vue3轮播组件_TypeScript_CSS_下载.zip
共75个文件
ts:31个
md:12个
vue:9个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 11 浏览量
2023-04-21
10:49:09
上传
评论
收藏 137KB ZIP 举报
温馨提示
Vue3轮播组件_TypeScript_CSS_下载.zip
资源推荐
资源详情
资源评论
收起资源包目录
Vue3轮播组件_TypeScript_CSS_下载.zip (75个子文件)
vue3-carousel-master
yarn.lock 235KB
.github
ISSUE_TEMPLATE
feature_request.md 594B
bug_report.md 829B
workflows
docs.yml 630B
jest.config.js 423B
src
partials
defaults.ts 351B
props.ts 2KB
icons.ts 369B
styles
carousel.css 523B
variables.css 596B
icon.css 103B
slide.css 227B
navigation.css 867B
pagination.css 659B
index.ts 142B
utils
getNumberInRange.ts 210B
mapNumberToRange.ts 321B
throttle.ts 457B
getMinSlideIndex.ts 726B
debounce.ts 446B
getSlidesToScroll.ts 796B
getMaxSlideIndex.spec.ts 3KB
getMaxSlideIndex.ts 773B
getMinSlideIndex.spec.ts 3KB
getSlidesVNodes.ts 356B
mapNumberToRange.spec.ts 796B
index.ts 264B
getNumberInRange.spec.ts 995B
components
Slide.ts 2KB
Icon.ts 630B
Navigation.ts 1KB
Pagination.ts 1KB
ARIA.ts 500B
Carousel.ts 13KB
types
carousel.ts 667B
common.ts 51B
index.ts 52B
shims-vue.d.ts 148B
index.ts 295B
tests
integartion
App.ts 402B
carousel.spec.ts 625B
unit
carousel.spec.ts 335B
CHANGELOG.md 742B
.prettierignore 18B
docs
dev.md 435B
getting-started.md 745B
examples.md 9KB
api
methods.md 1KB
data.md 898B
events.md 1KB
examples
ExampleWrapAround.vue 544B
ExampleBasic.vue 547B
ExampleAutoplay.vue 562B
ExamplePagination.vue 697B
ExampleGallery.vue 1KB
ExampleActiveClasses.vue 1KB
ExampleCustomNavigation.vue 902B
ExampleBreakpoints.vue 999B
configs.md 3KB
package.json 54B
.vitepress
components
Badge.vue 474B
theme
index.js 104B
styles.css 0B
config.js 841B
index.md 867B
package.json 2KB
rollup.config.js 1KB
.eslintrc.json 878B
.prettierrc.json 126B
.npmignore 72B
.gitignore 220B
.eslintignore 29B
tsconfig.json 493B
README.md 1KB
scripts
new-release.sh 108B
共 75 条
- 1
资源评论
快撑死的鱼
- 粉丝: 1w+
- 资源: 9156
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功