How to customize arrow buttons in Swiper

user_413225 0
Viewed 103739

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!

swiper.js css html javascript
16 Answers

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.

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

Try this instead of !important to change color.

user_117737720

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

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

user_149175460

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

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;
}
user_115493190 
.swiper-button-next::after, .swiper-button-prev::after{
    content: "";
}
user_138018000

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")
 }, [])
user_75054480

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>
user_139194720 
.swiper-button-next {
  --swiper-navigation-color:white;
}

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

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

user_170099110

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

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

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

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

user_152152860

For those who want to replace default arrows with custom SVG icon. I'm using Swiper version 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);
}
user_69048880

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