All Projects → surmon-china → Vue Awesome Swiper

surmon-china / Vue Awesome Swiper

Licence: mit
🏆 Swiper component for @vuejs

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to Vue Awesome Swiper

Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (-43.06%)
Mutual labels:  vue-components, vue-component, vuejs2, vue2, vue-plugin, vue-resource, vue-directive
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (-82.48%)
Mutual labels:  vue-components, vue-component, vuejs2, vue2, vue-plugin, vue-resource, vue-directive
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (-98.95%)
Mutual labels:  vue-components, vue2, vue-plugin, vue-component, vue-resource, vue-directive
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (-66.65%)
Mutual labels:  vue-components, vue-component, vuejs2, ssr, vue2, vue-resource
Vue Easy Slider
Slider Component of Vue.js.
Stars: ✭ 313 (-97.41%)
Mutual labels:  slides, swipe, slider, swiper, vue-plugin, vue-directive
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (-96.33%)
Mutual labels:  vue-components, vue-component, vuejs2, vue2, vue-plugin, vue-resource
vue-active-swiper
🌴 A Mobile-oriented、No dependencies、Lightweight Swiper component for Vue
Stars: ✭ 33 (-99.73%)
Mutual labels:  slider, vue-swiper, vue2, swiper, carrousel
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (-91.13%)
Mutual labels:  nuxtjs, vue-components, vue-component, vuejs2, ssr
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-99.03%)
Mutual labels:  swipe, slider, swiper, vuejs2, vue2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+66.42%)
Mutual labels:  vue-components, vue-component, vuejs2, ssr, vue2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (-97.9%)
Mutual labels:  vue-components, vue-component, vuejs2, vue2
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (-98.15%)
Mutual labels:  nuxtjs, vue-components, vuejs2, vue2
jooger.me
👍 My personal website,powered by @nuxt
Stars: ✭ 39 (-99.68%)
Mutual labels:  ssr, vuejs2, vue-component, nuxtjs
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-99.47%)
Mutual labels:  vuejs2, vue-components, vue2, vue-component
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (-89.89%)
Mutual labels:  vue-components, vue-component, vuejs2, vue2
Vue Slick Carousel
🚥Vue Slick Carousel with True SSR Written for ⚡Faster Luxstay
Stars: ✭ 447 (-96.3%)
Mutual labels:  slider, vue-component, swiper, ssr
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (-99.27%)
Mutual labels:  vue-components, vue-component, vuejs2, vue2
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-99.2%)
Mutual labels:  swipe, slider, slide, swiper
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-99.23%)
Mutual labels:  vue-component, vuejs2, vue2, vue-plugin
Navscroll Js
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.
Stars: ✭ 41 (-99.66%)
Mutual labels:  vue-component, vuejs2, vue-directive

     

vue-awesome-swiper

vue GitHub stars npm GitHub Workflow Status GitHub issues license

NPM

Swiper component for Vue.

Old versions:

Example


Install

npm install swiper vue-awesome-swiper --save

# or
yarn add swiper vue-awesome-swiper

# Swiper5 is recommended
yarn add [email protected] vue-awesome-swiper

Global Registration

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

Local Registration

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

CDN

<link rel="stylesheet" href="path/to/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>

Difference with usage

Directive and the only difference in the use of the Component:

Other configurations, events are the same.

The effect of the two ways and the difference in the applicable environment is here.

Component

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

Directive

<template>
  <div v-swiper:mySwiper="swiperOption">
    <div class="swiper-wrapper">
      <div class="swiper-slide" :key="banner" v-for="banner in banners">
        <img :src="banner">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          // ...
        }
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.mySwiper)
      this.mySwiper.slideTo(3, 1000, false)
    }
  }
</script>

Swiper component API

<!-- All events/props support camelCase or kebab-case. -->
<swiper
  :options="swiperOptionsObject"
  :auto-update="true"
  :auto-destroy="true"
  :delete-instance-on-destroy="true"
  :cleanup-styles-on-destroy="true"
  @ready="handleSwiperReadied"
  @click-slide="handleClickSlide"
/>

<!-- vue-awesome-swiper converts all Swiper events into component/directive events, e.g.: -->
<swiper
  @slide-change-transition-start="onSwiperSlideChangeTransitionStart"
  @slideChangeTransitionStart="onSwiperSlideChangeTransitionStart"
  @slideChangeTransitionEnd="..."
  @transitionStart="..."
  ...
/>
interface IProps {
  // Auto update swiper when vue component `updated`
  autoUpdate?: boolean // default: true
  // Auto destroy swiper when vue component 'beforeDestroy'
  autoDestroy?: boolean // default: true

  // swiper.destroy's params
  // swiper.destroy(deleteInstanceOnDestroy, cleanupStylesOnDestroy)
  deleteInstanceOnDestroy?: boolean // default: true
  cleanupStylesOnDestroy?: boolean // default: true
}

// `@ready` event will emit when the Swiper instance mounted
function handleSwiperReadied(swiper: Swiper) {
  console.log('Swiper was munted!', swiper)
}

// `@click-slide` event has special treatment for Swiper's loop mode, which is still available in loop mode
function handleClickSlide(index: number, reallyIndex: number | null) {
  console.log('Click slide!', index, reallyIndex)
}

Swiper directive API

Based on the exact same as the component API.

In the directive mode, the Swiper instance will be mounted in the parent's component context use the default name$swiper. In order to implement multiple swipers in a context, the directive has an additional name called instanceName API, through this API, you can easily control the name of each swiper mount context.

<div v-swiper="swiperOptionsObject" />
<div v-swiper:secondSwiper="swiperOptionsObject" />
<div v-swiper:[dynamicSwiperName]="swiperOptionsObject" />
<div v-swiper="swiperOptionsObject" instance-name="fourthSwiper" />
export dafault {
  data() {
    return {
      dynamicSwiperName: 'thirdSwiper'
    }
  },
  mounted() {
    console.log('Swiper instances:', this.$swiper, this.secondSwiper, this.thirdSwiper, this.fourthSwiper)
  }
}

Swiper API

Swiper's API and configuration can be used.


Custom Build with Swiper

import Vue from 'vue'
// Swiper 5.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/js/swiper.esm'
// Swiper 6.x
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay } from 'swiper/core'

import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// Swiper modules
SwiperClass.use([Pagination, Mousewheel, Autoplay])

// -------------------------------------------------

// Global use
Vue.use(getAwesomeSwiper(SwiperClass))

// -------------------------------------------------

// Or local component
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
export default {
  components: {
    Swiper,
    SwiperSlide
  }
}

Custom Swiper plugin

import SwiperClass from 'swiper'

SwiperClass.use({
  name: 'pluginName',
  params: {
    pluginSwitch: false,
  },
  on: {
    init() {
      if (!this.params.pluginSwitch) return
      console.log('init')
    },
    // ...
  }
})

// Your Swiper or App bussiness component...

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].