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

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

1. 引入

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

 

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

 

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

​

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

 

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

 

2.使用轮播图

 

1

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

 

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