Need help with vue-awesome-swiper?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

surmon-china
10.8K Stars 1.9K Forks MIT License 284 Commits 266 Opened issues

Description

🏆 Swiper component for @vuejs

Services available

!
?

Need anything else?

Contributors list

No Data

     

vue-awesome-swiper

vue GitHub stars npm GitHub Workflow Status GitHub issues license

NPM

Swiper component for Vue.

Old versions: - Swiper 4: v3.1.3 - Swiper 3: v2.6.7

Example


Install

npm install swiper vue-awesome-swiper --save

or

yarn add swiper vue-awesome-swiper

Swiper5 is recommended

yarn add [email protected] vue-awesome-swiper

Global Registration

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x) import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x) import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

Local Registration

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x) import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x) import 'swiper/css/swiper.css'

export default { components: { Swiper, SwiperSlide }, directives: { swiper: directive } }

CDN




Difference with usage

Directive and the only difference in the use of the Component: -

component
find Swiper instance by
ref attribute
. -
directive
find Swiper instance by
directive arg
.

Other configurations, events are the same.

The effect of the two ways and the difference in the applicable environment is here.

Component

Directive


Swiper component API


<swiper ...>

interface IProps {
  // Auto update swiper when vue component updated
  autoUpdate?: boolean // default: true
  // Auto destroy swiper when vue component 'beforeDestroy'
  autoDestroy?: boolean // default: true

// swiper.destroy's params // swiper.destroy(deleteInstanceOnDestroy, cleanupStylesOnDestroy) deleteInstanceOnDestroy?: boolean // default: true cleanupStylesOnDestroy?: boolean // default: true }

// @ready event will emit when the Swiper instance mounted function handleSwiperReadied(swiper: Swiper) { console.log('Swiper was munted!', swiper) }

// @click-slide event has special treatment for Swiper's loop mode, which is still available in loop mode function handleClickSlide(index: number, reallyIndex: number | null) { console.log('Click slide!', index, reallyIndex) }

Swiper directive API

Based on the exact same as the component API.

In the

directive
mode, the Swiper instance will be mounted in the parent's component context use the default name
$swiper
. In order to implement multiple swipers in a context, the
directive
has an additional name called
instanceName
API, through this API, you can easily control the name of each swiper mount context.
export dafault {
  data() {
    return {
      dynamicSwiperName: 'thirdSwiper'
    }
  },
  mounted() {
    console.log('Swiper instances:', this.$swiper, this.secondSwiper, this.thirdSwiper, this.fourthSwiper)
  }
}

Swiper API

Swiper's API and configuration can be used.


Custom Build with Swiper

import Vue from 'vue'
// Swiper 5.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/js/swiper.esm'
// Swiper 6.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'

import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// Swiper modules SwiperClass.use([Pagination, Mousewheel, Autoplay])

// -------------------------------------------------

// Global use Vue.use(getAwesomeSwiper(SwiperClass))

// -------------------------------------------------

// Or local component const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass) export default { components: { Swiper, SwiperSlide } }

Custom Swiper plugin

import SwiperClass from 'swiper'

SwiperClass.use({ name: 'pluginName', params: { pluginSwitch: false, }, on: { init() { if (!this.params.pluginSwitch) return console.log('init') }, // ... } })

// Your Swiper or App bussiness component...


Changelog

Detailed changes for each release are documented in the release notes.

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.