vue-awesome-swiper

       

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 Swiper 5-6 vue-awesome-swiper@4.1.1 (Vue2) Swiper 4.x vue-awesome-swiper@3.1.3 (Vue2) Swiper 3.x vue-awesome-swiper@2.6.7 (Vue2) Documentation Examples (Vue3) Examples (Vue2) Swiper API Swiper Vue (3) Swiper issues Swiper discussions 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.