vue swiper（vue-awesome-swiper）轮播图

vue swiper（vue-awesome-swiper）轮播图

vue中使用swiper插件

安装vue-awesome-swiper

npm install vue-awesome-swiper --save

引入vue-awesome-swiper，vue挂载

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在vue中使用

<template>
  <div class="hello">
    <swiper :options="swiperOption" class="swiper-container swiper-pagination1"  ref="mySwiper">   
        <swiper-slide class="swiper-slide">
          <p>111111111</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide> 
        <swiper-slide class="swiper-slide">
          <p>111111111</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <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>
    </swiper> 
    <swiper :options="swiperOption2" class="swiper-container swiper-pagination2"  ref="mySwiper">   
        <swiper-slide class="swiper-slide">
          <p>111111111</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide> 
        <swiper-slide class="swiper-slide">
          <p>111111111</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <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>
    </swiper>  
    <swiper :options="swiperOption3" class="swiper-container swiper-pagination3"  ref="mySwiper">   
        <swiper-slide class="swiper-slide">
          <p>111111111</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide> 
        <swiper-slide class="swiper-slide">
          <p>111111111</p>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          111
        </swiper-slide>
    </swiper>  
  </div>
</template>

<script> 
  require('swiper/dist/css/swiper.css');
  import { swiper, swiperSlide } from 'vue-awesome-swiper'  
  export default {  
      components: {  
          swiper,  
          swiperSlide  
      },  
      data() {  
          return {  
              swiperOption: {  
                pagination: '.swiper-pagination1',  
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: false,
                spaceBetween: 0,
                onSlideChangeEnd: swiper => {  
                    //这个位置放swiper的回调方法  
                    this.page = swiper.realIndex+1;  
                    this.index = swiper.realIndex;  
                },
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }, 
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true,
                }
            },
            swiperOption2: {  
                pagination: '.swiper-pagination1',  
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: false,
                spaceBetween: 0,
                freeMode: true,
                onSlideChangeEnd: swiper => {  
                    //这个位置放swiper的回调方法  
                    this.page = swiper.realIndex+1;  
                    this.index = swiper.realIndex;  
                },
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }, 
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true,
                }
            },swiperOption3: {  
                pagination: '.swiper-pagination1',  
                slidesPerView: 3,
                spaceBetween: 30,
                centeredSlides: false,
                spaceBetween: 0,
                freeMode: true
            }
          }  
      },  
      //定义这个sweiper对象  
      computed: {  

          swiper() {  
            return this.$refs.mySwiper.swiper;  
          }  
      },  
      mounted () {  
          //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  
          this.swiper.slideTo(0, 0, false);  
      }  

  }  
</script>  

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: 300px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-container{
  margin-bottom: 20px;
}
.swiper-pagination1 .swiper-slide:nth-child(odd){
  background-color: #abc;
}
.swiper-pagination1 .swiper-slide:nth-child(even){
  background-color: #0f0;
}
.swiper-pagination2 .swiper-slide:nth-child(odd){
  background-color: pink;
}
.swiper-pagination2 .swiper-slide:nth-child(even){
  background-color: yellow;
}
.swiper-pagination3 .swiper-slide:nth-child(odd){
  background-color: blue;
}
.swiper-pagination3 .swiper-slide:nth-child(even){
  background-color: #f0f;
}
</style>

以上是三个例子

如有错误地方，请留言指教，谢谢大家