vue-awesome-swiper 的安装和使用

 

vue-awesome-swiper 的安装和使用

安装：最好用：cnpm install vue-awesome-swiper --save。用npm太慢会卡死。

引用：

 

 /*全局引入*/
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否须要引入样式，以及具体位置。
    Vue.use(VueAwesomeSwiper, /* { default global options } */)

 

 

  /*组件方式引用*/
    import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否须要引入样式，以及具体位置。
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
    components: {
      swiper,
      swiperSlide
    }

 

 

 

 <swiper :options="swiperOption">
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
      <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
    </swiper>
    <!--如下看须要添加-->
    <div class="swiper-scrollbar"></div> //滚动条
    <div class="swiper-button-next"></div> //下一项
    <div class="swiper-button-prev"></div> //上一项
    <div class="swiper-pagination"></div> //标页码

 

 

 data() {
    return {
      swiperOption: {
        notNextTick: true,
        autoplay: true,
        speed: 1000,
        loop: true
      },
    };
  },
 components: {   //
    swiper,
    swiperSlide
  },

 

 

 

---

 

我我的本身使用的方法：

0.一、使用的是yarn 的方式安装插件：

 

 

0.二、在须要使用的组件中引入

 

 

0.三、结构设置，

 

 

 

 

 0.四、配置项设置1

 

 

0.五、配置项设置2