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)

Searching Database…

12.8K ·GitHub
Vue-awesome-swiper
archived
这是什么？vue-awesome-swiper 是 Swiper 轮播/滑块库的 Vue 封装，可以让你在 Vue 应用中直接使用 'swiper' 和 'swiper-slide' 组件。该项目现已弃用并归档，官方推荐改用 Swiper 官方的 Vue 组件。
它现在还是独立的轮播实现，还是只是一个简单的封装？其最新版本（v5）只是一个桥接层，重新导出 swiper/vue，并且只能配合 Vue 3 使用，因此不再拥有自己基于 Vue 2 时代的实现；更早的旧版本（v2.6.7 至 v4.1.1）才是真正面向 Vue 2 的封装，分别对应不同版本的 Swiper。
我要怎样把它添加到 Vue 项目中？先安装该包，然后可以在单个组件中局部注册 swiper 组件，也可以在整个应用中全局注册，具体步骤见 README 中的 Install、Local component 和 Global component 部分。
我还需要单独安装 Swiper 本身吗？需要。当前版本只是对 swiper/vue 的重新导出，因此 Swiper 是必需的依赖，而不是已经打包在里面的内容。
现在用它开始新项目安全吗？不安全。该项目已被官方弃用，并由 Swiper 自带的 Vue 组件取代；而且最新的 v5 API 与所有早期版本完全不兼容，因此新项目应直接使用 swiper/vue。
为什么 vue-awesome-swiper 被弃用了？Swiper 现在提供了自己官方的 Vue 组件（swiper/vue），对 TypeScript 也很友好，这使得这个社区封装变得多余，因此维护者建议用户直接迁移到官方组件。
如果我还在用 Vue 2，应该使用哪个版本？请使用为 Vue 2 构建的旧版本：Swiper 5-6 使用 v4.1.1，Swiper 4.x 使用 v3.1.3，Swiper 3.x 使用 v2.6.7，因为 v5 及以上版本只支持 Vue 3。
如果我依赖旧版本，能自己继续维护吗？可以。README 中明确鼓励用户 fork 代码，为有遗留需求的情况自行维护副本。
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