admin管理员组

文章数量:1134249

How can I customize the arrow buttons below from swipers?

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

I did it crudely but it does not seem to be the right way because I get some margin on the right of the button.

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

The entire code:

.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=".1.1/jquery.min.js"></script>

<!-- Zurb - CDN -->
<link rel="stylesheet" href=".4.1/css/foundation.min.css">
<script src=".4.1/js/foundation.min.js"></script>

<!-- Swiper - CDN -->
<link rel="stylesheet" href=".4.2/css/swiper.css">
<link rel="stylesheet" href=".4.2/css/swiper.min.css">

<script src=".4.2/js/swiper.js"></script>
<script src=".4.2/js/swiper.min.js"></script>
<script src=".4.2/js/swiper.jquery.js"></script>
<script src=".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>

How can I customize the arrow buttons below from swipers?

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

I did it crudely but it does not seem to be the right way because I get some margin on the right of the button.

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

The entire code:

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

I don't want the margin.

Any ideas?

EDIT:

How do I change the colour blue on the arrow to black?

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

Does not work of course!

  • javascript
  • html
  • css
  • swiper.js
Share Improve this question edited Jul 27, 2022 at 15:29 Penny Liu 17.3k5 gold badges86 silver badges108 bronze badges asked Jul 28, 2017 at 20:25 RunRun 57.1k177 gold badges461 silver badges771 bronze badges 1
  • 2 The element .swiper-button-next is set to right:10px. – showdev Commented Jul 28, 2017 at 20:44
Add a comment  | 

27 Answers 27

Reset to default 52

Add this to style the prev / next arrows:

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

Where "4c71ae" is the color you want to use in HEX.

:root {
    --swiper-theme-color: #000;
}

Try this instead of !important to change color.

Those who want to change the default arrows just set you custom SVG etc in the elements the HTML; mine is next & prev

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

And remove the default icons in CSS

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

With the current version of SwiperJS (v.5.3.8) you can change the color of the arrows in css without any issues. Just define color.

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

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

For anyone looking to change the color etc of various buttons etc for Swiper, be sure to inspect the CSS of what you are trying to change and see if the property you are trying to change is using a CSS variable.

In the case were a CSS variable has been used, you need to re-define it in order to change it.

Example for changing the color of the swiper next/prev buttons:

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

Add this to the styles.css (or globals.css in NextJS)

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

"I don't want the margin. Any ideas?"

If the margin is really the margin, not the result of right property, try to overwrite default "swipers" styles using !important, like this:

.class {
  margin: 0 !important;
}

Otherwise set right property to 0:

.class {
  right: 0;
}

Or

.class {
  right: 0 !important;
}

If it doesn't work without !important.

"How do I change the colour blue on the arrow to black?"

If you just want to make them black, you can simply use one of the built-in classes (swiper-button-black in your case) - thanks to this comment.

If you use JavaScript, you can also change --swiper-navigation-color inside the page/component instead of changing :root in the CSS file. I found it more convenient in React/Next.js. Just add this to your code.

document.documentElement.style.setProperty("--swiper-theme-color", "#000")

If you are going with this solution and you are building a React/Next.js app, remember to include the code from above in useEffect to load the document in the appropriate moment (more about it here).

 useEffect(() => {
    document.documentElement.style.setProperty("--swiper-theme-color", "#000")
 }, [])

If you're using React, another approach apart from @Jakub’s is to pass a style prop to Swiper like this

<Swiper style={{"--swiper-navigation-color": "#FFF", "--swiper-pagination-color": "#FFF"}}>
 .....
</Swiper>

This works perfectly except with Typescript (in production). You get an error that is silent in development but stops the app from deploying successfully (on Vercel in my case). The workaround is to remove the style props as done above, and target the elements we need to style (pagination indicators, next-button, prev-button etc) in our CSS WITH MORE SPEICIFITY, so as to override the default styles from Swiper. For example:

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

}

I did html.dark above just to illustrate a case where you're using Tailwind CSS and need a dark mode variant of your styles.

Also, !important will override the styles too, but it's considered as a bad practice unless the usage is VERY IMPORTANT.

If you're using Angular, you can simply use ::ng-deep to override the color.

For example :

::ng-deep .swiper-button-prev,
::ng-deep .swiper-button-next {
  color: white;
}

.swiper-button-next {
  --swiper-navigation-color:white;
}

.swiper-button-prev {
  --swiper-navigation-color:white;
}

If you just want to make them white or black you can use the built-in classes.

<div class="swiper-button-prev swiper-button-white"></div>

or

<div class="swiper-button-next swiper-button-black"></div>

For those seeking to substitute default arrows with customized SVG icons, the Swiper version utilized is 8.3.2.

Here is a demo example project.

Place <img> tag into both elements.

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

Then, remove the default icons in CSS.

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

.swiper-button-prev img {
  transform: rotate(180deg);
}

:root {
    --swiper-theme-color: #B9FF66 !important;
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 28rem !important;
}

.swiper-button-prev {
    left: 18rem !important;
    background-image: url("/images/arrow-left.svg") !important;
    background-repeat: no-repeat;
}

.swiper-button-next {
    right: 18rem !important;
    background-image: url("/images/arrow-right.svg") !important;
    background-repeat: no-repeat;
}


/* remove default icons */

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

@media only screen and (max-width: 767px) and (min-width: 375px) {
    .swiper-button-prev {
        left: 15.5rem !important;
    }

    .swiper-button-next {
        right: 15.5rem !important;
    }
}

I changed the arrow icon and set the default theme to a different color than the default, adjust the values according to your preference.

If you're using swiper with vanilla javascript you can just change the root colors in your main css file.

    :root {

  /* navigation arrows */
  --swiper-navigation-color: black;

  /* pagination buttons */
  --swiper-pagination-color: black;
  --swiper-pagination-bullet-inactive-color: black;
}

Also you can check the style docs for other style properties

With https://swiperjs.com/element Web Components in React you can target the shadow DOM with ::part. To implement a circular background for the buttons, for example (SCSS):

    swiper-container {
        &::part(button-next), &::part(button-prev) {
            padding:10px 15px;
            border-radius:50%;
            background-color: #ffffff80; 

        }
        &:hover {
            background-color: white;
        }
    }

combined with:

<swiper-container 
          style={{
            "--swiper-navigation-color": "#000",
            "--swiper-navigation-size": "25px",       
          }}
> ...
</swiper-container>

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

Very simple

.main__swiper_left {
background-image: url("../img_2/main__swiper_left.png");
width: 58px;
height: 58px; 
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.main__swiper_left::after {
display: none;
}

Source

For the color, edit the swiper-bundle.min.css on line 13, change the :root attribute to this:

    :root {
     --swiper-theme-color: #FFFFFF;
    }

This solution worked for me:

// use the `useState` hook instead of `useRef`
const [prevEl, setPrevEl] = useState<HTMLElement | null>(null)
const [nextEl, setPrevEl] = useState<HTMLElement | null>(null)
<Swiper navigation={{ prevEl, nextEl }}>
// some slides
</Swiper>
<div ref={(node) => setPrevEl(node)}>prev</div>
<div ref={(node) => setNextEl(node)}>next</div>

.swiper.swiper-button-next {color: black; --swiper-navigation-size: 30px;}

.swiper.swiper-button-prev{color: black; --swiper-navigation-size: 30px;}

Try this one! to Increase and Decrease Size and Change Color. Don't forget to use !important after the color property.

There are many ways to customize these arrows. You just need to specify your proper parameters in the :root of your CSS file.

:root {
--swiper-navigation-size: 16px; /* To edit the size of the arrows */
--swiper-navigation-color: #000; /* To edit the color of the arrows */
}

In my case what I did is removing 'navigation' from config options and instead created new html btn element with my own custom styling,after that I added slideNext() and slidePrev() methods of the Swiper instance.

const swiper = new Swiper(".mySwiper", {
      slidesPerView: 4,
      spaceBetween: 10,
      keyboardControl: true,

    });
    const nextButton = document.querySelector('.next-and-prev-buttons .next');
    const prevButton = document.querySelector('.next-and-prev-buttons .prev');

    nextButton.addEventListener('click', function () {
      swiper.slideNext();
    });

    prevButton.addEventListener('click', function () {
      swiper.slidePrev();
    });

I was using Swipper inside WordPress and couldn't figure out why a blue margin was appearing in my swipper buttons:

Using the browser inspector I noticed that the blue arrow is a svg element loaded in the background attribute so the following CSS rules fixed it for me:

.swiper-button-prev {
    background: none;
    color: black !important;
}

.swiper-button-next {
    background: none;
    color: black !important;
}

To anyone looking at this answer in 2023 using a swiper web component in React and who wants to hide the default nav svg arrows. I managed to do so by injecting these styles in:

:host .swiper-button-prev > svg,
:host .swiper-button-next > svg {
  display: none;
}

.swiper-button-prev {
    color: green !important;
}

.swiper-button-next {
    color: green !important;
}

If you want to change the color, you can simply do the following and it will overwrite the current color to white... Hope this will be useful! Note: You can specify any color you want to change! Thanks

.swiper-button-prev,.swiper-button-next{ 
   color:white !important;
}

This worked for me.

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

.swiper-button-next {
    color: red !important;
}

本文标签： javascriptHow to customize arrow buttons in SwiperStack Overflow

版权声明：本文标题：javascript - How to customize arrow buttons in Swiper - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736831286a1954708.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。