swiper
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
# npm
npm install nuxt-swiper
# yarn
yarn add nuxt-swiper
#pnpm
pnpm add nuxt-swiper
Setup
// nuxt.config.ts
import { 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 โ๏ธ