直播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建立輪播圖幻燈片，更多內容歡迎關注之後的文章