cpreston321 / nuxt-swiper

Swiper.js for Nuxt
https://www.npmjs.com/package/nuxt-swiper
MIT License
232 stars 10 forks source link
alternative nuxt nuxt-module nuxt3 swiper swiperjs vue
Cover Image

nuxt-swiper

Swiper.js built for Nuxt 3

Version Downloads MIT

Fully featured Swiper.js module for Nuxt 3. Checkout Swiper.js for more information about how to use.

Features

StackBlitz Demo

Just want to try it out ? Checkout the demo below.

Open in StackBlitz

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

βž• 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.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. 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 β˜•οΈ

Logo

πŸ”₯ Contributors