nuxt-keen-slider

Nuxt Keen Slider

Easy, lightweight slider or carousel creations.

• 🧪  Examples
• ✨  Release Notes
• 🏀  Online playground

Features

• ✊Great Performance: Best Lighthouse Perfomance, Lowest CLS
• ⚡Lightweight: No dependencies, Fast loading
• 📱Mobile First: Supports multi touch and is fully responsive
• ⚔️Compatible: Works in all common browsers, including >= IE 10 and React Native
• 🗼Extensible: Rich but simple API

Quick Setup

• Add nuxt-keen-slider dependency to your project

  # 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
  

• Add nuxt-keen-slider to the modules section of nuxt.config.ts

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

• Create a component with name of your wish, ex. 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>
  

• Add the component anywhere you want

  <template>
    <KeenSlider />
  </template>
  

That's it! You can now use Nuxt Keen Slider in your Nuxt app ✨

[!NOTE] OPTIONAL I have seen absolute 0 CLS, maximum performance by wrapping the Slider component with ClientOnly.
Seems to stop working if the component is created with .client.vue extension.
You could try the same if you are having Lighthouse/PageSpeed score issues and you are aiming for maximum performance.

Remember, this could not work depending on use case.

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

Development

# 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