swiper
Nuxt module for Swiper.js - Most modern mobile touch slider with hardware accelerated transitions.
nuxt-swiper
Swiper.js built for Nuxt 3
Fully featured Swiper.js module for Nuxt 3. Checkout Swiper.js for more information about how to use.
Features
- 🚀 Nuxt 3 Support
- 📖 Open Source
- 🪄 Typescript Support
- ✨ Auto imports enabled
- ✨ Just works out of the box like magic ✨
StackBlitz Demo
Just want to try it out ? Checkout the demo below.
Install
# npmnpm install nuxt-swiper# yarnyarn add nuxt-swiper#pnpmpnpm add nuxt-swiper
Setup
// nuxt.config.tsimport { defineNuxtModule } from 'nuxt'export default defineNuxtConfig({ modules: ['nuxt-swiper'] swiper: { // Swiper options //---------------------- // prefix: 'Swiper', // styleLang: 'css', // modules: ['navigation', 'pagination'], // all modules are imported by default }})
Usage
Component Name | Auto Imported |
---|---|
<Swiper /> | ✅ |
<SwiperSlide /> | ✅ |
Default Prefix: Swiper
You can change the prefix in the module options.
Module Name | Auto Imported |
---|---|
SwiperA11y | ✅ |
SwiperAutoplay | ✅ |
SwiperController | ✅ |
SwiperEffectCreative | ✅ |
SwiperEffectCoverflow | ✅ |
SwiperEffectCube | ✅ |
SwiperEffectFade | ✅ |
SwiperEffectFlip | ✅ |
SwiperFreeMode | ✅ |
SwiperGrid | ✅ |
SwiperHashNavigation | ✅ |
SwiperHistory | ✅ |
SwiperKeyboard | ✅ |
SwiperLazy | ❌ - Taken out Swiper ^9.0.0 |
SwiperMousewheel | ✅ |
SwiperManipulation | ✅ |
SwiperNavigation | ✅ |
SwiperPagination | ✅ |
SwiperParallax | ✅ |
SwiperScrollbar | ✅ |
SwiperThumbs | ✅ |
SwiperVirtual | ✅ |
SwiperZoom | ✅ |
<template> <Swiper :modules="[SwiperAutoplay, SwiperEffectCreative]" :slides-per-view="1" :loop="true" :effect="'creative'" :autoplay="{ delay: 8000, disableOnInteraction: true, }" :creative-effect="{ prev: { shadow: false, translate: ['-20%', 0, -1], }, next: { translate: ['100%', 0, 0], }, }" > <SwiperSlide v-for="slide in 10" :key="slide"> <strong>{{ slide }}</strong> </SwiperSlide> </Swiper></template>
Module Options
type SwiperStyleLangType = 'css' | 'scss'type SwiperModulesType = | 'a11y' | 'autoplay' | 'controller' | 'free-mode' | 'grid' | 'hash-navigation' | 'history' | 'keyboard' | 'manipulation' | 'mousewheel' | 'navigation' | 'pagination' | 'parallax' | 'scrollbar' | 'thumbs' | 'virtual' | 'zoom' | `effect-${SwiperInterface['effect']}`export interface SwiperModuleOptions { /** * The prefix to use for the Swiper Modules to import. * This is useful for importing only the modules you need and * avoiding importing the entire Swiper library. * * e.g. `${prefix}Autoplay` -> `SwiperAutoplay` * * @default 'Swiper' - import components from 'swiper/vue' by default */ prefix?: string /** * Which type of lang of styles to import * * @default 'css' - imports css from 'swiper/css' by default */ styleLang?: SwiperStyleLangType /** * Swiper modules to import * * '*' - imports all modules * '['thumbs', 'lazy']' - imports only specified modules * * @default '*' - imports all modules by default */ modules?: '*' | SwiperModulesType[]}export {}
💻 Development
- Clone this repository
- Enable Corepack using
corepack enable
- Install dependencies using
pnpm install --shamefully-hoist
- Open playground with
pnpm dev
➕ Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Credits
swiper
is developed by @nolimits4web.
nuxt-swiper
is developed by @cpreston321.
📜 License
MIT License © 2022 cpreston321
📧 Contact
cpreston321 - @cpreston321
Also, if you like my work, please feel free to buy me a coffee ☕️
🔥 Contributors
Contributors 5