DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to Customize Prev/Next Buttons in React SwiperJs
Timo Ernst
Timo Ernst

Posted on • Updated on • Originally published at timo-ernst.net

How to Customize Prev/Next Buttons in React SwiperJs

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; }
Enter fullscreen mode Exit fullscreen mode

Result:

Replace color of swiper js arrows

2. Replace Image of Swiper Arrows

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…

.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;
}
Enter fullscreen mode Exit fullscreen mode

Result:

Replace color of swiper js arrows

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

Top comments (6)

Collapse
 
hteamsoft profile image
hteamsoft

thanks Timo, i have an issue with my swiper. the arrow is there but not visible.
how can i fixed that issue. i'm using react and tailwindcss

thanks again
Image description
Image description

Collapse
 
elminhoemmanuel profile image
Emmanuel Amodu

Thanks this helped alot

Collapse
 
developer0116 profile image
dev

Great!
Thanks

Collapse
 
anwarhossain1 profile image
Anwar Hossain

Is there any way to customiza those arrows in nextjs? And where should i import your codes in my nextjs app?

Collapse
 
timo_ernst profile image
Timo Ernst Author

Yes, you can just overwrite the css

Collapse
 
michelpinto profile image
Michel Pinto

Hi Timo, is there any way to place the arrows outside the swiper wrapper? I'm using only react

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠