Im using swiper js for a project and wanted the navigation arrows so i added navigation module. it does works in all firefox browser(mobile/desktop) but not in any chrome browser what is causing the problem?
css im using to change color of the arrow
.Swiper1 {
width: 100%;
height: 300px;
}
.SwiperSlide1 {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 0.3s ease;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-button-prev::after{
font-size: 1.5rem;
color: white;
visibility: visible;
}
.swiper-button-next::after{
font-size: 1.5rem;
color: white;
}
html (JSX)
<Swiper
navigation={true}
loop={true}
modules={[Navigation,Autoplay]}
autoplay={{
delay: 4000,
disableOnInteraction: false,
}}
className="Swiper1">
<SwiperSlide></SwiperSlide >
swiper slide basically have pictures.(the code is too long)