jsx

Arrows in React Swiper Js: How to Customize Prev/Next Button

Leave a comment

I was asked on YouTube to explain how to customize the appearance of the prev/next arrows in the React version of Swiper Js. There are 2 methods. One is to simply overwrite the color value. The other one is to completely replace the image. Follow along to learn how to accomplish both.

1. Change Color of Swiper Arrows

To change the colors of the prev/next arrows you can overwrite css like this:

.swiper-button-next { color: red; }
Replace color of swiper js arrows

To replace the image you can do something like this:

2. Replace Image of Swiper Arrows

.swiper-button-next {
  background-image: url(./next.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-next::after {
  display: none;
}
Replace arrows image in Swiper js

In our example we use an svg to replace the original image. However, if you want you can also use any other web compatible image format you want like png, jpeg etc…

To change the arrow on the left replace class swiper-button-next with swiper-button-prev. Also keep in mind that there is a class called swiper-button-disabled which shows an arrow in a opaque way, so you probably want to overwrite that one as well.

If you want to learn more I have provided a working demo for you and also uploaded the full code to GitHub. Click the links below to find out more. Also, if you want feel free to follow me on Twitter or visit me on YouTube.

Links:

Have more questions about Swiper Js or web development tutorials in general? Leave a comment down below :-)

How to Set Responsive Breakpoints in Swiper React

2 Comments

I’ve been asked on YouTube how to use breakpoints in the new react version of Swiper, so here it is.

Download Source Code

First, you have to set breakpoints in jsx:

<Swiper
  breakpoints={{
    // when window width is >= 640px
    640: {
      width: 640,
      slidesPerView: 1,
    },
    // when window width is >= 768px
    768: {
      width: 768,
      slidesPerView: 2,
    },
  }}
>
  {slides}
</Swiper>

Then, add custom media queries to your css:

.swiper-container {
  width: 480px;
}

@media screen and (min-width: 640px) {
  .swiper-container {
    width: 640px;
  }
}

@media screen and (min-width: 768px) {
  .swiper-container {
    width: 768px;
  }
}

Hope this was helpful to you, don’t forget to checkout my working demo on GitHub. Leave a comment here if you have any questions. Happy coding!