Question

我尝试将swiper-button-next颜色更改为#444444，但您可以看到我的样式被忽略了：

＆＃13;

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    slidesPerGroup: 1,
    loop: true,
    loopFillGroupWithBlank: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

＆＃13;

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23444444'%2F%3E%3C%2Fsvg%3E) !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>

<div class="row">
    <div class="col-md-12">

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide col-md-4">
                    <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
                </div>
                <div class="swiper-slide col-md-4">
                    <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
                </div>
                <div class="swiper-slide col-md-4">
                    <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
                </div>
                <div class="swiper-slide col-md-4">
                    <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

    </div>
</div>

＆＃13;

Answer 1

我没有SVG的经验，但检查CSS中的URL似乎不完整。可能是复制粘贴错误？

background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23444444'%2F%3E%3C%2Fsvg%3E) !important;

注意www.w3.org%… ...看起来不正确。

在控制台中使用inspect运行代码并复制当前应用的网址，并将填充颜色从007aff更改为444444。

此外，每个应用的网址都包含箭头的形状，因此您可以为next和prev创建单独的CSS条目。

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  slidesPerGroup: 1,
  loop: true,
  loopFillGroupWithBlank: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'><path%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23444444'%2F><%2Fsvg>") !important;
}

.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23444444'%2F%3E%3C%2Fsvg%3E") !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>

<div class="row">
  <div class="col-md-12">

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide col-md-4">
          <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
        </div>
        <div class="swiper-slide col-md-4">
          <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
        </div>
        <div class="swiper-slide col-md-4">
          <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
        </div>
        <div class="swiper-slide col-md-4">
          <img class="img-fluid d-block mx-auto" src="http://via.placeholder.com/350x200">
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

  </div>
</div>

无法更改swiper next / prev按钮样式

1 个答案: