vue-awesome-swiper
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.1 • Public • Published

         

    vue-awesome-swiper

    vue   GitHub stars   npm   GitHub Workflow Status   license

    Swiper component for Vue.


    ⚠️ DEPRECATED

    The vue-awesome-swiper project will be deprecated in favor of 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.0.0 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, which means only functions of that component are available. For example, the following code is fully equivalent in vue-awesome-swiper@5.0.0. 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.

    Previous 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

    MIT

    Install

    npm i vue-awesome-swiper

    DownloadsWeekly Downloads

    108,512

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    7.97 kB

    Total Files

    5

    Last publish

    Collaborators

    • surmon