How to do custom pagination on react ?

[DrabantBY]

https://www.figma.com/file/xkP6mIaq7uG1Uru7CpasXq/Museum-04.09?node-id=0%3A1&t=EMqoKRFvcSCCGGCV-0
i want to make the slider in the section welcome on react with slider-swiper
your documentation is really difficulte, i can't understand it
please help me how to add two paginations and navigation to one container with custom styles

[hajirasyafi]

bro you have more specifically, but i try to help.
css style :

.swiper-custom-bullet {
  height: 2px;
  width: 2px;
  background-color: white;
}

.swiper-custom-bullet.swiper-custom-bullet-active {
  height: 2px;
  width: 2px;
  background-color: orange;
}

React :

const MyComponent = () => {
  return (
               <>
                  <div id="containerForBullets"></div>

                  <Swiper
                    pagination={{
                      el: "#containerForBullets",
                      type: "bullets",
                      bulletClass: "swiper-custom-bullet",
                      bulletActiveClass: "swiper-custom-bullet-active",
                      clickable: true,
                    }}
                 >
                   <SwiperSlide>Slide 1</SwiperSlide>
                   <SwiperSlide>Slide 2</SwiperSlide>
                   <SwiperSlide>Slide 3</SwiperSlide>
                   <SwiperSlide>Slide 4</SwiperSlide>
                </Swiper>
             <>
           )
};

[muamarzidan]

how i implement that css in that react, is the class from

bulletClass: "swiper-custom-bullet",
                      bulletActiveClass: "swiper-custom-bullet-active",
                      

automaticly implement on css?

[Yaroslav-Bulavin]

<div id="containerForBullets"></div>
Sould be inside Swiper container. Then it will work as expected.