Swiper slider doesn't rendered and works properly

Questions
1

I want to add Swiper slider to my react app with F7.

I have added this:

  useEffect(() => {
    global.app.swiper.create('.swiper-container', {
      speed: 400,
      spaceBetween: 10,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets'
      },
    })
  }, [])

  return (
    <React.Fragment>
      <div className="swiper-container">
        <div className="swiper-wrapper">
          <div className="swiper-slide">
            <Badge>Hello World</Badge>
          </div>
          <div className="swiper-slide">Slide 2</div>
          <div className="swiper-slide">Slide 3</div>
          <div className="swiper-slide">Slide 4</div>
          <div className="swiper-slide">Slide 5</div>
          <div className="swiper-slide">Slide 6</div>
          <div className="swiper-slide">Slide 7</div>
          <div className="swiper-slide">Slide 8</div>
          <div className="swiper-slide">Slide 9</div>
          <div className="swiper-slide">Slide 10</div>
        </div>
        <div className="swiper-pagination mt-3"></div>
      </div>
    </React.Fragment>
  )

But there many issues:

  1. The pagination dots are partially rendered - half of them is cut.

  2. I don’t success to achieve the: “Auto Slides Per View + Centered” - so the current slide is in the center, and the before and after are in showing from the edges.

  3. Many other properties filled with the Swiper initialization just doesn’t get working.

  4. When rendering slides with react mapping they doesn’t get include, for example:

     arrOfSlides.map(slide => {
  return (<div className="swiper-slide">Content</div>)
 }

the slide with the content will not be shown.

What am I missing, should I add any css file reference or something?