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 元件。如果您想為這些元件名稱新增前綴，您可以將 carousel 設定新增至您的 nuxt.config.ts

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 文件。

若要貢獻、提交問題或發送 pull request，請造訪 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