Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。

vue3-carousel-nuxt

此模块将 ismail9k 的 Vue 3 Carousel 模块无缝集成到 Nuxt 应用程序中。

Vue3 Carousel Nuxt 模块

此模块将 Vue 3 Carousel 组件与 Nuxt 3 集成。

安装

npx nuxi@latest module add vue3-carousel-nuxt

或使用 Yarn

npx nuxi@latest module add vue3-carousel-nuxt

使用

在您的 nuxt.config.ts(或 nuxt.config.js)中,添加模块

export default {
  modules: [
    'vue3-carousel-nuxt'
  ]
}

通过此配置,您现在可以在项目中使用 CarouselSlidePaginationNavigation 组件。如果您想为这些组件名称添加前缀,可以在 nuxt.config.ts 中添加 carousel 配置

export default {
  modules: [
    'vue3-carousel-nuxt'
  ],
  carousel: {
    prefix: 'MyPrefix'
  }
}

这将允许您使用带有前缀的组件,例如:<MyPrefixCarousel /><MyPrefixSlide /> 等。

样式

该模块自动导入 Vue 3 Carousel 的默认样式。如果您想自定义样式,可以在您自己的样式表中覆盖它们

/* Override Carousel styles in your CSS or SCSS files */
.carousel__slide {
  /* Your custom styles here */
}

请记住,您无需在样式表中再次导入 carousel.css,因为模块已将其导入。只需在您的 CSS 文件中编写您的自定义样式即可。

更多参考

有关 Vue 3 Carousel 组件的详细信息、其用法、选项和事件,请参阅 官方 Vue 3 Carousel 文档

要贡献、提交问题或拉取请求,请访问 Vue 3 Carousel GitHub 仓库

贡献

本地开发
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release