Git Product home page Git Product logo

nuxt-swiper's Introduction

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

  • ๐Ÿš€ 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.

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

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

  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

nuxt-swiper's People

Contributors

cpreston321 avatar dependabot[bot] avatar taknepoidet avatar misaon avatar soya-xy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.