无法更改滑动器 next/prev 按钮样式

Question

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

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-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;
}

<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>

Answer 1

我没有使用 SVG 的经验，但从您的 CSS 检查 URL 似乎不完整。可能是 copy-paste 错误？

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%… ... 看起来不对。

运行您的代码并使用控制台中的检查复制当前应用的 URL 并将填充颜色从 007aff 更改为 444444 工作正常。

此外，应用的每个 URL 也包含箭头的形状，因此您可以为 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>

无法更改滑动器 next/prev 按钮样式

Cannot change swiper next/prev button styles

html

javascript

css

swiper