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