直播app源码，使用vue-awesome-swiper创建轮播图幻灯片

直播app源码，使用vue-awesome-swiper创建轮播图幻灯片

1. 引入

引入方式可以参考官方文档，两种方式选一种即可：vue-awesome-swiper at v3.1.3

（1）第一种方式：在main.js入口文件中全局引入

// /src/main.js
 
// swiper全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

​

 （2）第二种方式：在需要使用轮播图的文件中按需引入

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}
</script>

2.使用轮播图

<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOption">
      <!-- 三张轮播图 -->
      <swiper-slide>
        <img src="../assets/images/pic1.jpeg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/images/pic2.jpeg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/images/pic3.jpeg" alt="">
      </swiper-slide>
      <!-- 分页器。如果放置在swiper外面，需要自定义样式。 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
 
<script>
// swiper已经全局引入过了，因此这里没有再引入
 
export default {
  name: 'HomeView',
  data() {
    return {
        //swiper轮播
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          }
        },
    }
  },
 
}
</script> 

以上就是 直播app源码，使用vue-awesome-swiper创建轮播图幻灯片，更多内容欢迎关注之后的文章