vue引入Swiper，背景颜色与轮播图片一致，更改前进后退按钮以及分页器样式，

最新推荐文章于 2023-12-11 17:05:17 发布

document_write

最新推荐文章于 2023-12-11 17:05:17 发布

阅读量2.2k

点赞数

本文链接：https://blog.youkuaiyun.com/document_write/article/details/99343081

版权

本文介绍了如何在Vue项目中安装并引入Swiper库，详细讲解了配置过程，包括设置背景颜色与轮播图片一致，自定义前进、后退按钮样式以及分页器的样式，以实现高度定制的轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 安装swiper(我的swiper版本是"^4.5.0",)
npm install swiper --save
二.局部引入
import Swiper from “swiper”;
import ‘swiper/dist/css/swiper.min.css’;
三.具体代码如下

<template>
  <div class="content" ref="bgColor">
    <div class="box">
      <div class="swiper-container  swiper-no-swiping"     @mouseover="mouseOver()" @mouseleave="mouseOut()">
        <div class="swiper-wrapper">
          <div v-for='(el,index) in arrItem' class="swiper-slide" :key="index">
            <img class="img" :src="el.imgUrl" >
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination swiper-P1"></div>
        <!-- 如果需要导航按钮 -->
        <div v-show="show" >
          <div class