How to Customize Prev/Next Buttons in React SwiperJs

 

Customizing Prev/Next Buttons in React SwiperJs

To customize the Prev/Next buttons, you can use the following props:

swiper-button-prev: This prop allows you to customize the previous button. You can pass a React component or an HTML element to this prop.

swiper-button-next: This prop allows you to customize the next button. You can pass a React component or an HTML element to this prop.

Here's an example of how to use these props, inside your css you can use the style below

This will change the color of the prev arrow button to green:

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

This will change the color of the next arrow button to blue:

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

Result:

Now Replace the Image of the Swiper Arrows

We will use an svg to replace the original prev/next arrow 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(../../../public/images/svg/circle-right-regular.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-next::after {
  display: none;
}

.swiper-button-prev {
  background-image: url(../../../public/images/svg/circle-left-regular.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
}

.swiper-button-prev::after {
  display: none;
}




Result:




To change the arrow on the left and right add your custom  arrow image to the class swiper-button-next and swiper-button-prev as shown in the console above. Also keep it in mind to add display: none; style to the button::after method to completely remove the default swiper button.

Conclusion:

That's it! You now know how to customize Prev/Next Buttons in React Swiper Js. You can further explore the Swiper Js documentation to learn more about the available props and customization options.

My name is Sen Gideons, If you have any questions or comments about this tutorial, please feel free to leave them in the comments section below.