为什么我的“Swiper”组件在 typescript 反应项目中不起作用？

Question

So I want to use a Swiper library for react. I have multiple movie elements, and I want to swipe through them. I import it like this:

import Swiper from 'react-id-swiper';

And I use it that way:

<div className="carousel-container">
        <Swiper>
                  {movies.map(movie =>
                      <MovieItem movie={movie} key={movie.title}/>
                    )}
        </Swiper>
    </div>

So it should make a horizontal slider with movie items, but on the page it looks like this:

So it's like I just put all the movies inside of a common div, although when I open the code in the browser, all movies are inside of swiper div with all the classes, so I'm not sure why it doesn't work the way it should. Maybe the problem is because I use .tsx file?

Answer 1

The issue is lack of css/styling.

The documentation on react-id-swiper is old. According to the documentation on the main module it uses ( swiperjs ) you need to add the styling/css like so:

import "swiper/css";

I've created a sandbox for you to see it working here