Nuxt Keen Slider

輕鬆建立輕量級的滑塊或輪播。

• 🧪  範例
• ✨  發行說明
• 🏀  線上遊樂場

功能

• ✊優異效能：最佳 Lighthouse 效能，最低 CLS
• ⚡輕量級：無依賴性，快速載入
• 📱行動優先：支援多點觸控且完全響應式
• ⚔️相容性：可在所有常見瀏覽器上運作，包括 >= IE 10 和 React Native
• 🗼可擴展性：豐富但簡單的 API

快速設定

1. 將 nuxt-keen-slider 依賴項新增至您的專案

   # Using pnpm
   pnpm add -D nuxt-keen-slider
   
   # Using yarn
   yarn add --dev nuxt-keen-slider
   
   # Using npm
   npm install --save-dev nuxt-keen-slider
   

2. 將 nuxt-keen-slider 新增至 nuxt.config.ts 的 modules 區段

   export default defineNuxtConfig({
     modules: [
       'nuxt-keen-slider'
     ]
   })
   

3. 建立一個您想要的名稱的元件，例如 KeenSlider.vue

   <template>
     <div ref="container" class="keen-slider">
       <div class="keen-slider__slide number-slide1">1</div>
       <div class="keen-slider__slide number-slide2">2</div>
       <div class="keen-slider__slide number-slide3">3</div>
       <div class="keen-slider__slide number-slide4">4</div>
       <div class="keen-slider__slide number-slide5">5</div>
       <div class="keen-slider__slide number-slide6">6</div>
     </div>
   </template>
   
   <script setup>
   const [container, slider] = useKeenSlider({
     loop: true,
     mode: "free",
     slides: {
       perView: 3,
       spacing: 15,
     },
   });
   </script>
   
   <style>
   [class^="number-slide"],
   [class*=" number-slide"] {
     background: grey;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 50px;
     color: #fff;
     font-weight: 500;
     height: 300px;
     max-height: 100vh;
   }
   
   .number-slide1 {
     background: rgb(64, 175, 255);
     background: linear-gradient(
       128deg,
       rgba(64, 175, 255, 1) 0%,
       rgba(63, 97, 255, 1) 100%
     );
   }
   
   .number-slide2 {
     background: rgb(255, 75, 64);
     background: linear-gradient(
       128deg,
       rgba(255, 154, 63, 1) 0%,
       rgba(255, 75, 64, 1) 100%
     );
   }
   
   .number-slide3 {
     background: rgb(182, 255, 64);
     background: linear-gradient(
       128deg,
       rgba(182, 255, 64, 1) 0%,
       rgba(63, 255, 71, 1) 100%
     );
     background: linear-gradient(
       128deg,
       rgba(189, 255, 83, 1) 0%,
       rgba(43, 250, 82, 1) 100%
     );
   }
   
   .number-slide4 {
     background: rgb(64, 255, 242);
     background: linear-gradient(
       128deg,
       rgba(64, 255, 242, 1) 0%,
       rgba(63, 188, 255, 1) 100%
     );
   }
   
   .number-slide5 {
     background: rgb(255, 64, 156);
     background: linear-gradient(
       128deg,
       rgba(255, 64, 156, 1) 0%,
       rgba(255, 63, 63, 1) 100%
     );
   }
   .number-slide6 {
     background: rgb(64, 76, 255);
     background: linear-gradient(
       128deg,
       rgba(64, 76, 255, 1) 0%,
       rgba(174, 63, 255, 1) 100%
     );
   }
   </style>
   

4. 將該元件新增至您想要的任何位置

   <template>
     <KeenSlider />
   </template>
   

就是這樣！您現在可以在您的 Nuxt 應用程式中使用 Nuxt Keen Slider 了✨

!注意可選的，我已看到透過使用 ClientOnly 包裹 Slider 元件，達到絕對 0 CLS、最大效能。
如果元件是使用 .client.vue 副檔名建立的，則似乎會停止運作。
如果您遇到 Lighthouse/PageSpeed 分數問題，並且您追求最大效能，您可以嘗試相同的方法。

請記住，這可能不會根據使用案例而運作。

<template>
  <ClientOnly>
    <KeenSlider />
  </ClientOnly>
</template>

開發

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
npm run release