Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
nuxt-swiper
Advanced tools
Swiper.js built for Nuxt 3
Fully featured Swiper.js module for Nuxt 3. Checkout Swiper.js for more information about how to use.
Just want to try it out ? Checkout the demo below.
# npm
npm install nuxt-swiper
# yarn
yarn add nuxt-swiper
#pnpm
pnpm add nuxt-swiper
// 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
}
})
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>
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 {}
corepack enable
pnpm install --shamefully-hoist
pnpm dev
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.
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)swiper
is developed by @nolimits4web.
nuxt-swiper
is developed by @cpreston321.
MIT License © 2022 cpreston321
cpreston321 - @cpreston321
Also, if you like my work, please feel free to buy me a coffee ☕️
FAQs
Unknown package
The npm package nuxt-swiper receives a total of 19,589 weekly downloads. As such, nuxt-swiper popularity was classified as popular.
We found that nuxt-swiper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.