vue起步4之轮播图插件安装和使用

轮播图插件安装和使用

轮播图插件 swiper.js

1. 安装

npm install swiper vue-awesome-swiper –save

1）在vue中引入

a)main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
import './styles/common.css';
Vue.use(VueAwesomeSwiper);

b)页面组件中   

<template>
  <div class="main">
            <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="item in carsousel_list" :key="item.name" ><img :src="item.image" alt=""></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
  </div>
</template>
<script>
  export default {
      name: 'carrousel',
      data() {
           return {
                swiperOptions: {
                     pagination: {
                          el: '.swiper-pagination',
                          type:'bullets'
                     },
                     autoplay:true,
               },
           carsousel_list:[]
           }

      },
      computed: {
        swiper() {
          return this.$refs.mySwiper.$swiper
        }
      },
      mounted() {
        console.log('Current Swiper instance object', this.swiper)
        this.swiper.slideTo(0, 1000, false),
              this.getCarsouselList();
      },
      methods:{
            getCarsouselList () {
                this.carsousel_list = [
                    {
                       'image':require('../../assets/1.jpg'),
                       'title':'第一张'
                     },
                     {
                       'image':require('../../assets/2.jpg'),
                       'title':'第二张'
                     },
                     {
                       'image':require('../../assets/3.jpg'),
                       'title':'第三张'
                      },
                      {
                       'image':require('../../assets/4.jpg'),
                       'title':'第四张'
                      }
                  ];
           }
     }
}
</script>
<style scoped>
  .main{
      height: 200px;
  }
  .swiper-container{
     height: 100%;
  }
</style>