直播平臺開發，使用swiper實現輪播效果

直播平臺開發，使用swiper實現輪播效果

第一步：安裝swiper`

  npm install swiper@4.5.1 --save-dev  // 安裝swiper

第二步：在main.js中引入

  //引入swiper
      import 'swiper/dist/css/swiper.min.css'
      import 'swiper/dist/js/swiper.min'

第三步：在component下新建一個名為swiper的元件

其html如下：

<template>
    <div class="container">
      <div class="containerBox">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide item" v-for="(item, index) in pointImgList" :key="index">
              <img class="img" :src="item.thumb1" alt="">
            </div>
         
          </div>
                 <!-- 如果需要導航按鈕 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
       
            <div class="swiper-pagination"></div>//分頁器
        </div>
      </div>
    </div>
</template>

 需要data提供資料：圖片路徑僅供參考

data() {
    return {
      pointImgList: [
        {
          thumb1: require('../assets/1.webp')
        },
        {
          thumb1: require('../assets/2.webp'),
        },
        {
          thumb1: require('../assets/3.jpg'),
        },
        {
          thumb1: require('../assets/4.jpg'),
        },
      ]
    }
  },

 以上就是直播平臺開發，使用swiper實現輪播效果， 更多內容歡迎關注之後的文章