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

1. 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

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

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

3. 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>

4. Add the component anywhere you want

   <template>
     <KeenSlider />
   </template>

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

<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