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 — это обёртка для Vue над библиотекой каруселей Swiper, которая позволяет вставить компоненты «swiper» и «swiper-slide» прямо в приложение Vue. Проект теперь устарел и архивирован в пользу официального Vue-компонента Swiper.
Это всё ещё собственная реализация карусели или теперь просто тонкая обёртка?Последний релиз (v5) — это лишь мост, который переэкспортирует swiper/vue и работает только с Vue 3, поэтому собственной реализации под Vue 2 у него больше нет. Более ранние версии (v2.6.7–v4.1.1) были настоящими обёртками под Vue 2 для разных версий Swiper.
Как добавить это в проект Vue?Установите пакет и зарегистрируйте компонент swiper либо локально в отдельном компоненте, либо глобально для всего приложения — это описано в разделах Install, Local component и Global component README.
Нужно ли отдельно устанавливать сам Swiper?Да: текущий релиз лишь переэкспортирует swiper/vue, поэтому Swiper является обязательной зависимостью, а не встроен в пакет.
Безопасно ли начинать новый проект с этим пакетом?Нет: он официально устарел и заменён собственным Vue-компонентом Swiper, а API последней версии v5 полностью несовместим со всеми предыдущими версиями, поэтому новые проекты должны использовать swiper/vue напрямую.
Почему vue-awesome-swiper признали устаревшим?Swiper теперь поставляет собственный официальный Vue-компонент (swiper/vue) с удобной поддержкой TypeScript, поэтому эта сторонняя обёртка стала лишней, и мейнтейнеры советуют пользователям сразу перейти на него.
Какую версию использовать, если я всё ещё на Vue 2?Используйте одну из версий под Vue 2: v4.1.1 для Swiper 5–6, v3.1.3 для Swiper 4.x или v2.6.7 для Swiper 3.x, так как v5 и новее поддерживают только Vue 3.
Могу ли я сам поддерживать пакет, если завишу от более старой версии?Да, в README прямо сказано, что пользователи могут форкнуть код и вести собственную копию для старых задач.
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