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