1

I am using Swiper Js in my project. I need to style my arrow button in slider. But when i add classes to them they stop working and disappear in HTML.

code :

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

import React from "react";
import { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

css :

.image-swiper-button-next , .image-swiper-button-prev {
   text-rendering: auto;
   color: red;
}

Any thoughts?

nee
  • 11
  • 2

1 Answers1

0

You have some options here:

  1. Use swiper default classes, so your CSS will be:
    .swiper-button-next,
    .swiper-button-prev {
      text-rendering: auto;
      color: red;
    }
  1. Create your own custom navigation buttons and styled them from scratch. Here you can see an example: stackoverflow.com/questions/64099383
Andrew
  • 630
  • 1
  • 5
  • 14