https://github.com/modbender/nuxt-keen-slider
Keen Slider for lightweight best web performance
https://github.com/modbender/nuxt-keen-slider
Last synced: about 1 year ago
JSON representation
Keen Slider for lightweight best web performance
- Host: GitHub
- URL: https://github.com/modbender/nuxt-keen-slider
- Owner: modbender
- License: mit
- Created: 2024-03-06T15:04:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-26T16:34:10.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T08:31:47.523Z (about 1 year ago)
- Language: Vue
- Homepage:
- Size: 161 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
Nuxt Keen Slider
Easy, lightweight slider or carousel creations.
-----
- [🧪 Examples](https://keen-slider.io/examples)
- [✨ Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/modbender/nuxt-keen-slider?file=playground%2Fapp.vue)
## 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
```bash
# 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`
```js
export default defineNuxtConfig({
modules: [
'nuxt-keen-slider'
]
})
```
3. Create a component with name of your wish, ex. `KeenSlider.vue`
```xml
const [container, slider] = useKeenSlider({
loop: true,
mode: "free",
slides: {
perView: 3,
spacing: 15,
},
});
[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%
);
}
```
4. Add the component anywhere you want
```xml
```
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.
```xml
```
## Development
```bash
# 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
```