How to customize arrow buttons in Swiper

Question

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!

The element `.swiper-button-next` is set to `right:10px`. – showdev Jul 28 '17 at 20:44 — showdev, Jul 28 '17 at 20:44

score 50 · Answer 1 · answered Nov 07 '17 at 19:12

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.

I find David's answer easier if it's just about changing color https://stackoverflow.com/questions/45381871/swiper-how-to-customise-arrow-buttons#answer-61428906 — Timo Ernst, Sep 12 '20 at 18:06

score 24 · Answer 2 · answered Dec 11 '20 at 16:02

24

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

Try this instead of !important to change color.

answered Dec 11 '20 at 16:02

Aniket Chauhan

386
2
6

score 11 · Answer 3 · answered Apr 25 '20 at 16:29

11

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

answered Apr 25 '20 at 16:29

David.G

111
1
3

score 10 · Answer 4 · answered Aug 26 '21 at 12:25

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

score 5 · Answer 5 · answered Nov 28 '21 at 06:00

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

P.S. · Accepted Answer · 2021-09-02T18:46:33.977

3

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

edited Sep 02 '21 at 18:46

answered Jul 28 '17 at 20:54

P.S.

15,970
14
62
86

it works now. I have another question - how do I change the colour on the arrow to black? – Run Jul 28 '17 at 20:59
@teelou, what this arrows actually are? SVG, font icon, or pure css element? – P.S. Jul 28 '17 at 21:01
I have no idea to be honest. – Run Jul 28 '17 at 21:03
can't find any info on their doc. – Run Jul 28 '17 at 21:03
@teelou, just open "developer tools" (f12 in most cases) and inspect the element. Or press mouse2 on the element and click "inspect" – P.S. Jul 28 '17 at 21:05
this is what I get `
` from the dev tool. – Run Jul 28 '17 at 21:07
1

I just looked at your reputation and thought, that you know about devtools without my instructions) – P.S. Jul 28 '17 at 21:07
found it. it is svg but have no idea how to change its colour: `.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'%23007aff'%2F%3E%3C%2Fsvg%3E); right: 10px; left: auto; }` – Run Jul 28 '17 at 21:13
1

@teelou, i really have no idea what this arrow is, so try to change `fill`, `stroke`, `color` and `background-color` to any color you like with `!important` flag after it, i hope one of these will work. If not, check the docs, if there is a way to style it, it should be in the docs. If not, so there is no way to do that or i don't know the one. – P.S. Jul 28 '17 at 21:13
1

@teelou, if it's an SVG, `fill` or `stroke` should work – P.S. Jul 28 '17 at 21:14
I have tried it. but dunno where should I apply the fill and stroke. see my edit above please. thanks. – Run Jul 28 '17 at 21:21
@teelou, does elements with styles `.swiper-button-next` and `.swiper-button-prev` has any other elements inside it? – P.S. Jul 28 '17 at 21:27
Found the answer - `swiper-button-black`. I think they are hardcoded the svg `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'%23007aff'%2F%3E%3C%2Fsvg%3E` – Run Jul 28 '17 at 21:30
1

@teelou, the last thing that i can suggest is to try to use `path {fill: black !important;}`. If this will not work, sorry, i have no idea how to do that =( Or it's really impossible, to change their color. – P.S. Jul 28 '17 at 21:35
1

thanks for the suggestion. I think I will just use what they provided `swiper-button-black` - less pain customising it lol – Run Jul 28 '17 at 21:41
1

@teelou, glad to help, a little pity that we didn't find working solution for customizing – P.S. Jul 28 '17 at 21:44

score 3 · Answer 7 · answered Jan 06 '22 at 10:11

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

Basit Balogun · Answer 8 · 2023-03-25T13:58:06.627

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.

I think you have a typo: you typed "--swiper-navigation-color" twice when you probably wanted to refer to "--swiper-pagination-color" — George Pasquali, Jun 15 '22 at 17:00

score 1 · Answer 9 · answered Feb 03 '21 at 08:52

1

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

answered Feb 03 '21 at 08:52

Eudz

540
6
19

score 1 · Answer 10 · answered Jul 15 '21 at 16:33

1

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

answered Jul 15 '21 at 16:33

Richard Afoudo

11
2

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P Jul 15 '21 at 20:19

Penny Liu · Answer 11 · 2023-03-25T08:52:10.130

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

score 1 · Answer 12 · answered Jul 31 '22 at 11:31

1

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

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

answered Jul 31 '22 at 11:31

Alouani Younes

948
9
17

1

Yes, put the code in the snippets in your css file then instead of white put black. – Alouani Younes Aug 02 '22 at 14:28

score 1 · Answer 13 · answered Jan 29 '23 at 06:54

1

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>

answered Jan 29 '23 at 06:54

Monzur Alam

512
4
11

score 0 · Answer 14 · edited Sep 27 '21 at 05:42

0

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

edited Sep 27 '21 at 05:42

newbNox

1,000
2
15
25

answered Sep 26 '21 at 17:42

Andrey Akhmetshin

1

Please correctly format your code. – m7913d Sep 26 '21 at 17:55

score 0 · Answer 15 · answered Apr 13 '22 at 22:03

0

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

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

answered Apr 13 '22 at 22:03

Nwachukwu A. Nnaemeka

369
4
13

score 0 · Answer 16 · answered Nov 01 '22 at 21:58

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>

score 0 · Answer 17 · edited Nov 09 '22 at 05:20

0

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

edited Nov 09 '22 at 05:20

Suraj Rao

29,388
11
94
103

answered Nov 09 '22 at 05:09

Abbas Ali

1
1

score 0 · Answer 18 · answered Dec 03 '22 at 16:40

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 */
}

score 0 · Answer 19 · answered Mar 05 '23 at 01:52

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

score 0 · Answer 20 · answered Mar 27 '23 at 21:15

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

score 0 · Answer 21 · edited May 15 '23 at 09:38

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

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, May 13 '23 at 10:33

score 0 · Answer 22 · answered Aug 16 '23 at 10:36

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

enter code here

score -1 · Answer 23 · answered May 24 '22 at 13:19

-1

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

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

answered May 24 '22 at 13:19

Md Shah Jalal

52
4

score -1 · Answer 24 · edited Aug 18 '22 at 16:33

-1

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

edited Aug 18 '22 at 16:33

vimuth

5,064
33
79
116

answered Aug 15 '22 at 12:20

iammboto

1
1

score -2 · Answer 25 · answered Oct 18 '22 at 10:38

-2

This worked for me.

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

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

answered Oct 18 '22 at 10:38

Aklile SUP

1
3

3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 20 '22 at 10:07

How to customize arrow buttons in Swiper

25 Answers25