526互联

直播平台开发，使用swiper实现轮播效果

发布时间 2023-09-21 14:14:18作者: 云豹科技-苏凌霄

直播平台开发，使用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实现轮播效果， 更多内容欢迎关注之后的文章