Login/Register
How to customize arrow buttons in Swiper
Asked Answered
Solved javascripthtmlcssswiper.js
S

27

42

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!

Supplicant answered 28/7, 2017 at 20:25 Comment(1)
The element .swiper-button-next is set to right:10px. – Deadeye
K
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.

Kwiatkowski answered 28/7, 2017 at 20:54 Comment(16)
it works now. I have another question - how do I change the colour on the arrow to black? – Supplicant
@teelou, what this arrows actually are? SVG, font icon, or pure css element? – Kwiatkowski
I have no idea to be honest. – Supplicant
can't find any info on their doc. – Supplicant
@teelou, just open "developer tools" (f12 in most cases) and inspect the element. Or press mouse2 on the element and click "inspect" – Kwiatkowski
this is what I get <div class="swiper-button-next swiper-arrow hide-for-small-only hide-for-medium-only" style="opacity: 0; display: none;"></div> from the dev tool. – Supplicant
I just looked at your reputation and thought, that you know about devtools without my instructions) – Kwiatkowski
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; } – Supplicant
@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. – Kwiatkowski
@teelou, if it's an SVG, fill or stroke should work – Kwiatkowski
I have tried it. but dunno where should I apply the fill and stroke. see my edit above please. thanks. – Supplicant
@teelou, does elements with styles .swiper-button-next and .swiper-button-prev has any other elements inside it? – Kwiatkowski
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 – Supplicant
@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. – Kwiatkowski
thanks for the suggestion. I think I will just use what they provided swiper-button-black - less pain customising it lol – Supplicant
@teelou, glad to help, a little pity that we didn't find working solution for customizing – Kwiatkowski
C
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.

Cobbett answered 7/11, 2017 at 19:12 Comment(1)
I find David's answer easier if it's just about changing color #45382371 – Fracas
B
28
:root {
    --swiper-theme-color: #000;
}

Try this instead of !important to change color.

Battles answered 11/12, 2020 at 16:2 Comment(0)
M
18

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: "";
}
Merit answered 26/8, 2021 at 12:25 Comment(1)
This is the easiest solution and I cannot believe that I didn't even think that I can just add a custom value in the div – Jasminjasmina
R
13

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; 
}
Renwick answered 25/4, 2020 at 16:29 Comment(0)
M
7

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;
}
Mention answered 28/11, 2021 at 6:0 Comment(0)
K
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.

Kwiatkowski answered 28/7, 2017 at 20:54 Comment(16)
it works now. I have another question - how do I change the colour on the arrow to black? – Supplicant
@teelou, what this arrows actually are? SVG, font icon, or pure css element? – Kwiatkowski
I have no idea to be honest. – Supplicant
can't find any info on their doc. – Supplicant
@teelou, just open "developer tools" (f12 in most cases) and inspect the element. Or press mouse2 on the element and click "inspect" – Kwiatkowski
this is what I get <div class="swiper-button-next swiper-arrow hide-for-small-only hide-for-medium-only" style="opacity: 0; display: none;"></div> from the dev tool. – Supplicant
I just looked at your reputation and thought, that you know about devtools without my instructions) – Kwiatkowski
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; } – Supplicant
@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. – Kwiatkowski
@teelou, if it's an SVG, fill or stroke should work – Kwiatkowski
I have tried it. but dunno where should I apply the fill and stroke. see my edit above please. thanks. – Supplicant
@teelou, does elements with styles .swiper-button-next and .swiper-button-prev has any other elements inside it? – Kwiatkowski
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 – Supplicant
@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. – Kwiatkowski
thanks for the suggestion. I think I will just use what they provided swiper-button-black - less pain customising it lol – Supplicant
@teelou, glad to help, a little pity that we didn't find working solution for customizing – Kwiatkowski
E
3

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")
 }, [])
Ezzell answered 6/1, 2022 at 10:11 Comment(0)
C
2

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.

Cachou answered 26/5, 2022 at 11:18 Comment(2)
I think you have a typo: you typed "--swiper-navigation-color" twice when you probably wanted to refer to "--swiper-pagination-color" – Unexacting
Oh thanks for spotting that, George! 👍🏾Will edit now – Cachou
R
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;
}
Rufus answered 3/2, 2021 at 8:52 Comment(0)
C
1
.swiper-button-next::after, .swiper-button-prev::after{
    content: "";
}
Carsick answered 15/7, 2021 at 16:33 Comment(1)
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. – Kid
B
1

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);
}
Biased answered 27/7, 2022 at 15:24 Comment(0)
C
1
.swiper-button-next {
  --swiper-navigation-color:white;
}

.swiper-button-prev {
  --swiper-navigation-color:white;
}
Confirmation answered 31/7, 2022 at 11:31 Comment(1)
Yes, put the code in the snippets in your css file then instead of white put black. – Confirmation
C
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>
Compose answered 29/1, 2023 at 6:54 Comment(0)
N
1
: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.

Nica answered 13/5, 2023 at 9:18 Comment(1)
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. – Ancestry
D
1

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

Detect answered 8/12, 2023 at 6:49 Comment(0)
S
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

Shalloon answered 26/9, 2021 at 17:42 Comment(1)
Please correctly format your code. – Tum
L
0

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

    :root {
     --swiper-theme-color: #FFFFFF;
    }
Lazaretto answered 13/4, 2022 at 22:3 Comment(0)
O
0

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>
Odilia answered 1/11, 2022 at 21:58 Comment(0)
L
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.

Leggat answered 9/11, 2022 at 5:9 Comment(0)
Z
0

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 */
}
Zilla answered 3/12, 2022 at 16:40 Comment(0)
R
0

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();
    });
Rearmost answered 5/3, 2023 at 1:52 Comment(0)
Z
0

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

Swipper next button with blue margin

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;
}
Zetta answered 27/3, 2023 at 21:15 Comment(0)
P
0

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;
}
Petepetechia answered 16/8, 2023 at 10:36 Comment(0)
H
0

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>
Highclass answered 20/3 at 21:28 Comment(0)
D
-1

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

.swiper-button-next {
    color: green !important;
}
Durware answered 24/5, 2022 at 13:19 Comment(0)
B
-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;
}
Baudoin answered 15/8, 2022 at 12:20 Comment(0)
B
-2

This worked for me.

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

.swiper-button-next {
    color: red !important;
}
Brusquerie answered 18/10, 2022 at 10:38 Comment(1)
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. – Ancestry

© 2022 - 2024 — McMap. All rights reserved.