vue-awesome-swiper README

The project's README from github.com/surmon-china/vue-awesome-swiper. As one markdown file: README.md.

     

vue-awesome-swiper

vue   GitHub stars   GitHub issues   npm   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.

vue-awesome-swiper (surmon-china/vue-awesome-swiper)

carousel
Searching Database…

12.8K ·GitHub
Vue-awesome-swiper
archived
What is this?vue-awesome-swiper is a Vue wrapper around the Swiper carousel/slider library, letting you drop a 'swiper' and 'swiper-slide' component into a Vue app. The project is now deprecated and archived in favor of the official Swiper Vue component.
Is this still its own carousel implementation or just a thin wrapper now?Its last release (v5) is just a bridge that re-exports swiper/vue and only works with Vue 3, so it no longer has its own Vue-2-era implementation; earlier legacy versions (v2.6.7-v4.1.1) were the real Vue 2 wrappers around different Swiper versions.
How do I add it to a Vue project?You install the package and register the swiper component either locally in a single component or globally for the whole app, as covered in the Install/Local component/Global component sections of the README.
Do I need Swiper itself installed separately?Yes — the current release is only a re-export of swiper/vue, so Swiper is a required dependency rather than something bundled in.
Is it safe to start a new project with this?No — it's officially deprecated and superseded by Swiper's own Vue component, and the latest v5 API is completely incompatible with all earlier versions, so new projects should use swiper/vue directly instead.
Why was vue-awesome-swiper deprecated?Swiper now ships its own official, TypeScript-friendly Vue component (swiper/vue), which makes this community wrapper redundant, so the maintainers point users to migrate directly to it.
Which version should I use if I'm still on Vue 2?Use one of the legacy releases built for Vue 2: v4.1.1 for Swiper 5-6, v3.1.3 for Swiper 4.x, or v2.6.7 for Swiper 3.x, since v5+ only supports Vue 3.
Can I keep maintaining it myself if I rely on an older version?Yes, the README explicitly invites users to fork the code and maintain their own copy for legacy needs.
What are similar projects?primevue, swiper, element, mint-ui, quasar, vuestic-admin, vux, vuetify
Which topics is it in?slide, nuxtjs, carousel, vue-components, vue2, vuejs, component-library, vue, ui-components, animation, deprecated, frontend
Creator
surmon-china
Size
1.2 MB
Stars
12.8K
Updated
CommitDec 21Releasev5.0.0Mar 19
Age
10y
Commits · 90 Days