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