Nuxt Keen Slider

簡単で軽量なスライダーやカルーセルを作成します。

Nuxt Keen Slider - Preview 1 Nuxt Keen Slider - Preview 2

機能

✊優れたパフォーマンス:最高の Lighthouse パフォーマンス、最低 CLS
⚡軽量:依存関係不要、高速ロード
📱モバイルファースト:マルチタッチをサポートし、完全にレスポンシブ
⚔️互換性:IE 10 以上と React Native を含む、一般的なすべてのブラウザで機能します
🗼拡張可能:豊富でシンプルな API

クイックセットアップ

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

nuxt-keen-slider を nuxt.config.ts の modules セクションに追加します。

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

お好みの名前のコンポーネントを作成します。例: 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>

コンポーネントを好きな場所に追加します。
```
<template>
  <KeenSlider />
</template>
```

これで準備完了です。Nuxt アプリで Nuxt Keen Slider を使用できるようになりました ✨

！注意 Slider コンポーネントを ClientOnly でラップすることで、CLS を完全に 0、最大のパフォーマンスを確認しました。
.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