• This repository has been archived on 15/Jul/2023
  • Stars
    star
    12,800
  • Rank 2,502 (Top 0.05 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🏆 Swiper component for @vuejs

     

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.

More Repositories

1

vue-quill-editor

@quilljs editor component for @vuejs(2)
JavaScript
7,368
star
2

videojs-player

@videojs player component for @vuejs(3) and React.
TypeScript
5,203
star
3

vue-codemirror

@codemirror code editor component for @vuejs
TypeScript
3,217
star
4

surmon.me

🌱 My digital garden, powered by myself.
Vue
2,091
star
5

nodepress

🟢 RESTful API service for https://surmon.me blog, powered by @nestjs
TypeScript
1,422
star
6

surmon.me.native

📱 My blog app, powered by react-native
TypeScript
620
star
7

vue-touch-ripple

A ink-ripple effect component for @vuejs
TypeScript
480
star
8

angular-admin

🔏 Admin client for surmon.me blog powered by @angular and Bootstrap4
TypeScript
354
star
9

simple-netease-cloud-music

🎵 A simple netease music api lib. 简单、统一、轻巧的 Node.js 版网易云音乐 API
TypeScript
272
star
10

ngx-quill-editor

🍡@quilljs editor component for @angular
TypeScript
232
star
11

surmon-china.github.io

My GitHub repositories homepage.
Vue
221
star
12

naivebayes

NaiveBayes classifier for JavaScript
JavaScript
142
star
13

vue-drag-zone

Drag Zone component for @vuejs
JavaScript
129
star
14

surmon.admin

🔏 Admin client for surmon.me blog, powered by React & @veactjs
TypeScript
61
star
15

mongodb-data-api

MongoDB Atlas Data API SDK for @nodejs
TypeScript
40
star
16

emoji-233333

😂 2333333
JavaScript
38
star
17

sre.surmon.me

💻 SRE service for Surmon.me blog.
HTML
34
star
18

vue2any

把 vue 组件转换为任何 web 类模板
JavaScript
33
star
19

wonderful-bing-wallpaper

🌅 Simple bing daily wallpaper API lib for Node.js.
TypeScript
31
star
20

vuniversal

[WIP] Create vue (3) universal web applications quickly by @vitejs.
TypeScript
19
star
21

surmon-china

About me
JavaScript
16
star
22

wordpress-theme-one

🎨 A blog theme for @wordpress
CSS
16
star
23

libundler

📦 Universal JavaScript library bundler, powered by @rollup.
TypeScript
14
star
24

developer-code-guide

🗒Developer code guide.
12
star
25

README.vue

Design your README.md by @vuejs component.
Vue
11
star
26

wordpress-theme-surmon

🎨 A blog theme for @wordpress
PHP
10
star
27

surmon.me.flutter

📱 My blog app powered by @flutter (The repositorie has been deprecated)
Dart
9
star
28

wordpress-theme-metro

🎨 A blog theme for @wordpress
PHP
9
star
29

javascript-gobang

⚫Javascript gobang game
HTML
9
star
30

nurse.js

My lib.
JavaScript
9
star
31

jquery-dragZone

jQuery 拖拽改变div大小效果
HTML
7
star
32

better-itg-flat-dark-vscode-theme

Better itg.flat.dark theme for vscode. Base on Sublime Text
7
star
33

wordpress-theme-think

🎨 A cms theme for @wordpress
PHP
7
star
34

coolcut

cool cut psd file
JavaScript
5
star
35

chrome-tmall-rate-thumb-extend

⚾️ 增加在天猫商品评价页显示原图及图片旋转操作功能
JavaScript
5
star
36

action-ssl-cert-expiry-checker

Check SSL certificate expiry time for your domains
JavaScript
3
star
37

ifttt

IFTTT SPACE
1
star
38

.github

GitHub
1
star