I'm currently incorporating Swiper Js into my project and I'm facing an issue with styling the arrow buttons in the slider. Whenever I try to add classes to them, they stop functioning and disappear from the HTML.
Here is the code snippet:
<Swiper
className={slider}
modules={[Navigation]}
spaceBetween={50}
slidesPerView={1}
navigation={{
nextEl: ".image-swiper-button-next",
prevEl: ".image-swiper-button-prev",
disabledClass: "swiper-button-disabled",
}}
onSwiper={(swiper) => console.log(swiper)}
onSlideChange={() => console.log("slide change")}
>
<SwiperSlide>slide 1</SwiperSlide>
<SwiperSlide>slide 2</SwiperSlide>
<SwiperSlide>slide 3</SwiperSlide>
</Swiper>
Imports section:
import React from "react";
import { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
CSS Style:
.image-swiper-button-next , .image-swiper-button-prev {
text-rendering: auto;
color: red;
}
What are your thoughts on this matter?