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 ✨

！注意 可选 我已经看到绝对 0 CLS，通过将 Slider 组件包装在 ClientOnly 中，可以获得最大性能。
如果组件是用 .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