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

11.9K Stars 1.9K Forks MIT License 284 Commits 318 Opened issues


ūüŹÜ Swiper component for @vuejs

Services available


Need anything else?

Contributors list



vue GitHub stars npm GitHub Workflow Status GitHub issues license


Swiper component for Vue.

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



npm install swiper vue-awesome-swiper --save


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 } }


Difference with usage

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

find Swiper instance by
ref attribute
. -
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.



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

mode, the Swiper instance will be mounted in the parent's component context use the default name
. In order to implement multiple swipers in a context, the
has an additional name called
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...


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



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.