Nuxt Splide
Performance first slider/carousel you have always been waiting after Owl Carousel.
The Splide slider does not degrade Accessibility, Best Practices and SEO 🎉
Features
- 🔆 No Lighthouse/PageSpeed Errors
- ⚡ Lightweight, No dependencies
- 🕶️ Unstyled or Styled with themes
- ⚔️ Compatible with modern browsers
- ➡️ RTL and vertical direction
- 🗼 Flexible and Extensible
Quick Setup
-
Add nuxt-splide
dependency to your project
pnpm add -D nuxt-splide
yarn add --dev nuxt-splide
npm install --save-dev nuxt-splide
-
Add nuxt-splide
to the modules
section of nuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-splide'
]
splide: {
theme: 'default'
}
})
Theme | Description |
---|
default | default theme |
skyblue | light blue theme |
sea-green | green theme |
core | unstyled |
-
Next add Splide
and SplideSlide
components to your page.
<template>
<Splide
:options="{ perPage: 3, perMove: 1, type: 'loop' }"
aria-labelledby="My Favorite Images"
>
<SplideSlide>
<img
src="https://images.unsplash.com/photo-1460176449511-ff5fc8e64c35?q=80&w=2074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sample 1"
/>
</SplideSlide>
<SplideSlide>
<img
src="https://images.unsplash.com/photo-1561424412-6c2125ecb1cc?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sample 2"
/>
</SplideSlide>
<SplideSlide>
<img
src="https://images.unsplash.com/photo-1507160874687-6fe86a78b22e?q=80&w=1959&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sample 3"
/>
</SplideSlide>
<SplideSlide>
<img
src="https://plus.unsplash.com/premium_photo-1664478194406-4a1f2915f685?q=80&w=2072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sample 4"
/>
</SplideSlide>
<SplideSlide>
<img
src="https://images.unsplash.com/photo-1584220844836-4071bc6cc793?q=80&w=1928&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sample 5"
/>
</SplideSlide>
<SplideSlide>
<img
src="https://images.unsplash.com/photo-1513889961551-628c1e5e2ee9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sample 6"
/>
</SplideSlide>
</Splide>
</template>
<script setup></script>
<style>
img {
width: 100%;
aspect-ratio: 4/3;
}
</style>
For all options
check Official Documentation.
That's it! You can now use Nuxt Splide in your Nuxt app ✨
Development
pnpm install
pnpm run dev:prepare
pnpm run dev
pnpm run dev:build
pnpm run lint
pnpm run test
pnpm run test:watch
npm run release