vue swiper banner组件

想个名字想老半天

已于 2023-03-29 16:45:09 修改

阅读量338

点赞数

文章标签： vue.js javascript 前端

于 2023-03-29 16:44:54 首次发布

本文链接：https://blog.csdn.net/MistShown/article/details/129839996

版权

基于vue2版本

建议安装偶数位 node-v14.x

建议安装node版本管理器nvm

swiper组件官网

效果图展示
在这里插入图片描述

1.项目中安装swiper

npm i wiper@5.4.5

2.对应页面使用

<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
          <img :src="item" alt="">
        </div>
      </div>
      <!-- 分页器 -->
      <div class="paginationBox">
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  data() {
    return {
      bannerList: [
        'https://图片地址',
        'https://图片地址'
      ]
    }
  },
  mounted() {
    this.getBanner()
  },
  methods: {
    getBanner() {
    	//获取图片request 回调之后 注册swiper
      new Swiper('.swiper-container', {
        autoplay: true,//自动播放
        speed:2000,//播放速度
        loop: true,//无缝
        pagination: {//是否展示页码
          el: '.swiper-pagination',//页码容器
          clickable :true,//是否可以点击页码切换
        },
      })
    }
  }
}
</script>

<style lang="less" scoped>
.swiper-slide {
  height: 480px;

  img {
    width: 100%;
    height: 480px;
    object-fit: cover;
  }
}

.paginationBox {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 20px;
  z-index: 3;
}

.swiper-pagination {
  display: flex;
  background: rgba(255, 255, 255, 0.3);//页码默认小圆点颜色
  border-radius: 6px;
  padding: 2px 5px;
  margin: 0 auto;

  /deep/.swiper-pagination-bullet {
    display: block;
    margin: 0 2px;
    background-color: #fff;//页码背景色
  }

  /deep/.swiper-pagination-bullet-active {
    background-color: #F71D0C;//选中小圆点颜色
  }
}
</style>