Skip to content

surmon-china/vue-awesome-swiper

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Mar 19, 2022
Mar 15, 2020
Mar 15, 2020
Mar 19, 2022
Mar 19, 2022
Mar 19, 2022

Β Β Β Β Β 

vue-awesome-swiper

vue Β  GitHub stars Β  npm Β  GitHub Workflow Status Β  license

Swiper component for Vue.


DEPRECATED ⚠️

The vue-awesome-swiper project has been deprecated and superseded by Swiper Vue component, a TypeScript friendly project which is a recent official release provided by Swiper. For better stability, please migrate as soon as possible.

vue-awesome-swiper released its last version v5 for (bridge) transition. It's worth noting that APIs in this version are completely NOT compatible with that of previous version, it only re-exports swiper/vue and only supports Vue3, which means only functions of swiper/vue are available. For example, the following code is fully equivalent in vue-awesome-swiper@5. And if you want to check update catelog of Swiper API, please refer to Swiper Changelog.

import { Swiper, SwiperSlide, /* rest swiper/vue API... */ } from 'vue-awesome-swiper'
// exactly equivalent to
import { Swiper, SwiperSlide, /* rest swiper/vue API... */ } from 'swiper/vue'

If you need to use older versions of vue-awesome-swiper, you can find the corresponding version number below. Feel free to fork our code and maintain your own copy.

Legacy versions


Documentation

How to use

Install

npm install swiper vue-awesome-swiper --save
yarn add swiper vue-awesome-swiper

Local component

<template>
  <swiper :modules="modules" :pagination="{ clickable: true }">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

<script>
  import SwiperClass, { Pagination } from 'swiper'
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

  // import swiper module styles
  import 'swiper/css'
  import 'swiper/css/pagination'
  // more module style...

  export default {
    components: {
      Swiper,
      SwiperSlide
    },
    setup() {
      return {
        modules: [Pagination]
      }
    }
  }
</script>

Global component

import { createApp } from 'vue'
import SwiperClass, { /* swiper modules... */ } from 'swiper'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import swiper module styles
import 'swiper/css'
// more module style...

// use swiper modules
SwiperClass.use([/* swiper modules... */])

const app = createApp()
app.use(VueAwesomeSwiper)

Component API

<!-- All options and events of the original Swiper are supported -->
<swiper
  :modules="..."
  :allow-touch-move="false"
  :slides-per-view="1"
  :autoplay="{ delay: 3500, disableOnInteraction: false }"
  @swiper="..."
  @slide-change="..."
  @transition-start="..."
  ...
>
  <template #container-start><span>Container start</span></template>
  <template #wrapper-start><span>Wrapper start</span></template>
  <swiper-slide>Slide 1<swiper-slide>
  <swiper-slide v-slot="{ isActive }">Slide 2 {{ isActive }}<swiper-slide>
  <swiper-slide>Slide 3<swiper-slide>
  <template #wrapper-end><span>Wrapper end</span></template>
  <template #container-end><span>Container end</span></template>
</swiper>

Changelog

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

License

Licensed under the MIT License.