Vue.js image carousel component

Vue.js image carousel component

 

Component address:

https://github.com/surmon-china/vue-awesome-swiper

 

 

npm install vue-awesome-swiper --save

 

 

<!-- If you later need to find the currently instantiated swiper object to perform some operations on it, you can customize a ref attribute -->

<swiper :options="swiperOption" ref="mySwiperA">

  <!-- slideshow content-->

  <swiper-slide>I'm Slide 1</swiper-slide>

  <swiper-slide>I'm Slide 2</swiper-slide>

  <swiper-slide>I'm Slide 3</swiper-slide>

  <swiper-slide>I'm Slide 4</swiper-slide>

  <swiper-slide>I'm Slide 5</swiper-slide>

  <swiper-slide>I'm Slide 6</swiper-slide>

  <swiper-slide>I'm Slide 7</swiper-slide>

  <!-- ... -->

  <!-- The following control elements are optional (use a named slot to identify and apply some action control elements) -->

  <div class="swiper-pagination"  slot="pagination"></div>

  <div class="swiper-button-prev" slot="button-prev"></div>

  <div class="swiper-button-next" slot="button-next"></div>

  <div class="swiper-scrollbar"   slot="scrollbar"></div>

</swiper>

 

 

import View from 'view'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

 

// use

export default {

  components: {

    swiper,

    swiperSlide

  }

}

 

 

refer to:

http://www.swiper.com.cn/

https://github.com/ElemeFE/vue-swipe

https://github.com/hilongjw/vue-slide