Github url

vue-awesome-swiper

by surmon-china

surmon-china /vue-awesome-swiper

πŸ† Swiper component for @vuejs

10.0K Stars 1.8K Forks Last release: 3 months ago (v4.1.1) MIT License 281 Commits 52 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

     

vue-awesome-swiper

vueGitHub starsnpmGitHub Workflow StatusGitHub issueslicense

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

Global Registration

import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // import style import 'swiper/css/swiper.css' // If you use Swiper 6.0.0 or higher import 'swiper/swiper-bundle.css' Vue.use(VueAwesomeSwiper, /\* { default options with global component } \*/)

Local Registration

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper' import 'swiper/css/swiper.css' // If you use Swiper 6.0.0 or higher import 'swiper/swiper-bundle.css' export default { components: { Swiper, SwiperSlide }, directives: { swiper: directive } }

CDN

<link rel="stylesheet" href="path/to/swiper.css"><script type="text/javascript" src="path/to/swiper.js"></script><script type="text/javascript" src="path/to/vue.min.js"></script><script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script><script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>

Difference with usage

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

component

find Swiper instance by [

ref attribute

](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements). -

directive

find Swiper instance by [

directive arg

](https://vuejs.org/v2/guide/custom-directive.html#Dynamic-Directive-Arguments).

Other configurations, events are the same.

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

Component

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template><script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

Directive

<template>
  <div v-swiper:myswiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template><script>
  export default {
    data () {
      return {
        banners: ['/1.jpg', '/2.jpg', '/3.jpg'],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // ...
        }
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.mySwiper)
      this.mySwiper.slideTo(3, 1000, false)
    }
  }
</script>

Swiper component API

<!-- All events/props support camelCase or kebab-case. --><swiper :options="swiperOptionsObject" :auto-update="true" :auto-destroy="true" :delete-instance-on-destroy="true" :cleanup-styles-on-destroy="true"></swiper><!-- vue-awesome-swiper converts all Swiper events into component/directive events, e.g.: --><swiper ...></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' import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/js/swiper.esm' // If you use Swiper 6.0.0 or higher 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.