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'
  ]
}

透過此配置，您現在可以在專案中使用 Carousel、Slide、Pagination 和 Navigation 元件。如果您想為這些元件名稱新增字首，您可以在 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