vue swiper的插件

首先我们要用到swiper,所以要安装它，通过npm安装

npm install swiper

然后好麻烦直接贴代码了   ↓↓↓

<template>
  <div id="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"
          v-for="item in lists"><img :src="item.img"></div>
      </div>
      <div class="swiper-pagination"
        @click="left"></div>
      <div class="swiper-button-next"
        @click="next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import 'swiper/dist/js/swiper.min.js'
  export default {
    data() {
      return {
        lists: [],


      }
    },
    mounted() {
			
      this.$http.get("https://api.myjson.com/bins/17ys0m").then((res) => {
        this.lists = res.data;
        this.swiper = new Swiper('.swiper-container', {
          observer: true,
          preventLinksPropagation : false,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        });


      })
    },
    methods: {
			pay () {
				let money = this.lists[this.swiper.activeIndex].money
				console.log(money)
			}
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  
  #banner {
    width: 100%;
    height: 150px;
  }
  
  .swiper-slide {
    width: 100%;
    height: 150px;
  }
  
  .swiper-slide img {
    width: 100%;
    height: 100%;
  }
</style>

效果图: 因为我就是为了练练手，所以我并没有写样式，小伙伴可以自己去写，还有js中的一些swiper的其它属性，比如自动播放，切换之类的，请参考官网API文档：http://www.swiper.com.cn/api/index.html

去吧皮卡丘！~~~

到底了！！！~~~