logo标签列表

如何自定义Swiper中的箭头按钮

javascripthtmlcssswiper.js
39
我如何自定义下面的箭头按钮，来自Swiper？
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

我做得很粗略，但这似乎不是正确的方法，因为按钮右侧会有一些空白。

<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>

整段代码：

.swiper-container {
  width: 100%;
  height: 450px;
}

.swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide {
  font-size: 18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.swiper-banner-slide {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

.swiper-slide .title {
  font-family: 'Bellefair', serif;
  font-size: 41px;
  line-height: 40px;
  font-weight: 300;
}

.swiper-slide .subtitle {
  font-size: 21px;
}

.swiper-slide .text {
  font-size: 21px;
  letter-spacing: 1px;
}

.slide-info-container {
  color: #000;
}

.swiper-block {
  padding: 40px 0 40px;
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  /*padding: 0;*/
}

.swiper-block .swiper-container {
  width: 100%;
  height: 300px;
  margin: 20px auto;
}

.swiper-block .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
<!-- CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Zurb - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>

<!-- Swiper - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>

<main>

  <div class="row" id="banner">

    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide swiper-banner-slide" style="background-image: url('images/1.jpg')">

          <!-- grid container -->
          <div class="grid-container">
            <div class="grid-x grid-padding-x">
              <div class="small-12 medium-10 large-8 cell slide-info-container">
                <h3 class="title">Aliquam dictum mattis velit 1</h3>
                <div class="text">
                  <p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. </p>
                </div>
                <a href="#features" class="hollow button button-details">More Details</a>
              </div>
            </div>
          </div>
          <!-- grid container -->

        </div>

        <div class="swiper-slide swiper-banner-slide" style="background-image: url('images/2.jpg')">

          <!-- grid container -->
          <div class="grid-container">
            <div class="grid-x grid-padding-x">
              <div class="small-12 medium-10 large-8 cell slide-info-container">
                <h3 class="title">Aliquam dictum mattis velit 2</h3>
                <div class="text">
                  <p>Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
                </div>
                <a href="#features" class="hollow button button-details">More Details</a>
              </div>
            </div>
          </div>
          <!-- grid container -->

        </div>
        <div class="swiper-slide swiper-banner-slide" style="background-image: url('images/3.jpg')">

          <!-- grid container -->
          <div class="grid-container">
            <div class="grid-x grid-padding-x">
              <div class="small-12 medium-10 large-8 cell slide-info-container">
                <h3 class="title">Aliquam dictum mattis velit 3</h3>
                <div class="text">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. </p>
                </div>
                <a href="#features" class="hollow button button-details">More Details</a>
              </div>
            </div>
          </div>
          <!-- grid container -->

        </div>
        <div class="swiper-slide swiper-banner-slide" style="background-image: url('images/4.jpg')">

          <!-- grid container -->
          <div class="grid-container">
            <div class="grid-x grid-padding-x">
              <div class="small-12 medium-10 large-8 cell slide-info-container">
                <h3 class="title">Aliquam dictum mattis velit 4</h3>
                <div class="text">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. </p>
                </div>
                <a href="#features" class="hollow button button-details">More Details</a>
              </div>
            </div>
          </div>
          <!-- grid container -->

        </div>
        <div class="swiper-slide swiper-banner-slide" style="background-image: url('images/5.jpg')">

          <!-- grid container -->
          <div class="grid-container">
            <div class="grid-x grid-padding-x">
              <div class="small-12 medium-10 large-8 cell slide-info-container">
                <h3 class="title">Aliquam dictum mattis velit 5</h3>
                <div class="text">
                  <p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.</p>
                </div>
                <a href="#features" class="hollow button button-details">More Details</a>
              </div>
            </div>
          </div>
          <!-- grid container -->

        </div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
      <!-- Add Arrows -->
      <div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
        <div class=" swiper-button-prev hide-for-small-only hide-for-medium-only "></div>
    </div>
    <!-- Swiper -->

    </div>

    <!-- row block -->
    <div class="row swiper-block ">

        <div class="grid-container ">
            <div class="grid-x grid-padding-x ">

                <div class="small-12 cell ">
                    <!-- Swiper -->
                    <div class="swiper-container ">
                        <div class="swiper-wrapper ">
                            <div class="swiper-slide ">Slide 1</div>
                            <div class="swiper-slide ">Slide 2</div>
                            <div class="swiper-slide ">Slide 3</div>
                            <div class="swiper-slide ">Slide 4</div>
                            <div class="swiper-slide ">Slide 5</div>
                            <div class="swiper-slide ">Slide 6</div>
                            <div class="swiper-slide ">Slide 7</div>
                            <div class="swiper-slide ">Slide 8</div>
                            <div class="swiper-slide ">Slide 9</div>
                            <div class="swiper-slide ">Slide 10</div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination "></div>
                    </div>
                </div>

            </div>
        </div>

    </div>

</main>

<script>
  $(function() {
    $(document).foundation();

    var swiper = new Swiper('#banner .swiper-container', {
        pagination: '#banner .swiper-pagination',
        slidesPerView: 1,
        paginationClickable: true,
        centeredSlides: true,
        spaceBetween: 30,
        loop: true,
        keyboardControl: true,
        nextButton: '#banner .swiper-button-next',
        prevButton: '#banner .swiper-button-prev',
    });


    var swiper2 = new Swiper('.swiper-block .swiper-container', {
        pagination: '.swiper-block .swiper-pagination',
        slidesPerView: 5,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true,
        keyboardControl: false,
    });
  });
</script>

我不想要边距。

有什么想法吗？

编辑：

我如何将箭头上的蓝色更改为黑色？

.swiper-button-next,
.swiper-button-prev {
    background-color: white;
    background-color: rgba(255, 255, 255, 0.5);
    right:10px;
    padding: 30px;
    color: #000 !important;
    fill: black !important;
    stroke: black !important;
}

当然不起作用！

2
元素.swiper-button-next被设置为right:10px。 - showdev
25个回答
50

添加以下样式以为上一个/下一个箭头设置样式：

.swiper-button-prev {
  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'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !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'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}

“4c71ae”是你想要在十六进制中使用的颜色。

我觉得David的回答更容易理解，如果只是关于改变颜色的问题。https://dev59.com/yek5XIcBkEYKwwoY9-p1 - Timo Ernst
25
:root {
    --swiper-theme-color: #000;
}

尝试使用这个方法来改变颜色，而不是使用 !important。

15
想要更改默认箭头的人只需将自定义SVG等设置在HTML元素中即可；我的是“下一个”和“上一个”。 

<div class="swiper-button-next">Next</div>
<div class="swiper-button-prev">Prev</div>

移除CSS中的默认图标

.swiper-button-next::after, .swiper-button-prev::after {
    content: "";
}

1
这是最简单的解决方案，我简直不敢相信我居然没想到可以在 div 中添加自定义值。 - undefined
11

使用当前版本的SwiperJS（v5.3.8），可以在CSS中更改箭头的颜色，而不会出现任何问题。只需定义颜色即可。

.swiper-button-prev {
    color: red; 
}

.swiper-button-next {
    color: #000; 
}
5

对于想要改变Swiper中各个按钮等的颜色等的人，请务必检查您要更改的内容的CSS，并查看您要更改的属性是否在使用CSS变量。

如果使用了CSS变量，则需要重新定义它以进行更改。

更改swiper下一个/上一个按钮颜色的示例：

基础CSS：

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color));
}

将以下内容添加到styles.css（或在NextJS中的globals.css）中

:root {
  --swiper-navigation-color: #E49A38;
}
3

“我不想要边距，有什么想法？”

如果边距确实是边距，而不是right属性的结果，请尝试使用!important覆盖默认的“swipers”样式，就像这样：

.class {
  margin: 0 !important;
}

否则将 right 属性设置为 0:
.class {
  right: 0;
}

或者

.class {
  right: 0 !important;
}

如果没有使用!important就无法正常工作。

"如何将箭头上的蓝色改为黑色？"

如果您只想将它们变成黑色，可以简单地使用内置类之一（在您的情况下是swiper-button-black），感谢此评论。

1
我刚刚查看了您的声望，认为您已经了解开发工具，无需我的指示。 - P.S.
1
@teelou，我真的不知道这个箭头是什么，所以尝试使用!important标志将fill、stroke、color和background-color更改为您喜欢的任何颜色，希望其中之一能起作用。如果不行，请查看文档，如果有一种样式的方法，它应该在文档中。如果没有，那么就没有办法做到这一点，或者我不知道如何做到。 - P.S.
1
@teelou，如果它是SVG，fill或stroke应该可以使用。 - P.S.
1
@teelou，我能提供的最后一个建议是尝试使用path {fill: black !important;}。如果这不起作用，很抱歉，我不知道该怎么做=(或者真的无法更改它们的颜色。 - P.S.
1
@teelou，很高兴能帮忙，有点遗憾我们没有找到可用的自定义解决方案。 - P.S.
显示剩余11条评论
3
如果你使用JavaScript，你也可以在页面/组件内更改--swiper-navigation-color，而不是在CSS文件中更改:root。我发现在React/Next.js中更方便。只需将以下代码添加到你的代码中即可。
document.documentElement.style.setProperty("--swiper-theme-color", "#000")

如果您正在使用这种解决方案并构建React/Next.js应用程序，请记得在useEffect中包含上面的代码以在适当的时刻加载document（更多信息请参见此处）。
 useEffect(() => {
    document.documentElement.style.setProperty("--swiper-theme-color", "#000")
 }, [])
2
如果您正在使用React，除了@Jakub的方法之外，另一种方法是将style属性传递给Swiper，如下所示。
<Swiper style={{"--swiper-navigation-color": "#FFF", "--swiper-pagination-color": "#FFF"}}>
 .....
</Swiper>

这段代码在生产环境下使用Typescript时会出现问题。在开发环境中，错误是静默的，但会阻止应用程序成功部署（在我的情况下是在Vercel上）。解决方法是像上面所做的那样删除样式属性，并以更具体的方式在我们的CSS中针对需要样式化的元素（分页指示器、下一页按钮、上一页按钮等）进行定位，以覆盖Swiper的默认样式。例如：

html.dark .swiper-button-prev, html.dark .swiper-button-next{
    color: #63fb9a;
}

html .swiper-pagination-bullet {
    background: #05d652e8;
}

html.dark .swiper-pagination-bullet {
    background: #63fb9a;
}

html .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #05d652e8;
}

html.dark .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #63fb9a;
}

html .swiper-pagination-bullet.swiper-pagination-bullet-active, html.dark .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

html .swiper-pagination-bullet {
    opacity: 0.3;
}

html .swiper-navigation-size {
    width: calc(35/ 44 * 27);
    height: 35;
    margin-top: calc(0px - (35/ 2));

}

我之前写了html.dark只是为了演示一种情况，在这种情况下，您正在使用Tailwind CSS并需要样式的深色模式变体。

此外，!important也可以覆盖样式，但除非使用非常重要，否则被认为是不良实践。

我认为您打错字了： 您两次输入了 "--swiper-navigation-color"，而您可能想要引用的是 "--swiper-pagination-color"。 - George Pasquali
哦，谢谢你发现了这个问题，George！我现在会进行编辑。 - Basit Balogun
1
如果您正在使用Angular，您可以简单地使用::ng-deep来覆盖颜色。
例如：
::ng-deep .swiper-button-prev,
::ng-deep .swiper-button-next {
  color: white;
}
1

对于那些想要用自定义的SVG图标替换默认箭头的人来说，所使用的Swiper版本是8.3.2。

这里有一个演示示例项目。

将<img>标签放入两个元素中。

<!-- Navigation arrows -->
<div class="swiper-button-prev">
  <img src="@/assets/icons/svg/right-arrow.svg" />
</div>
<div class="swiper-button-next">
  <img src="@/assets/icons/svg/right-arrow.svg" />
</div>

然后，在CSS中删除默认图标。

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-prev img {
  transform: rotate(180deg);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接