代码之家 › 专栏 › 技术社区 › NarÅ«nasK

无法更改swiper下一个/上一个按钮样式

swiper css html javascript

-2

NarÅ«nasK · 技术社区 · 7 年前

在这里,我尝试改变 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>

1 回复 | 直到 7 年前

Nope landerton 7 年前

我没有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复制当前应用的URL,并更改填充颜色 007aff 到 444444 工作正常。

此外,应用的每个URL也包含箭头的形状,因此您可以为 next 和 prev 。

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>