CODEWITHSUNDEEP
reactjstypescriptswiper.js
Carl
Carl

Reputation: 357

Why my "Swiper" component doesn't work in a typescript react project?

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: enter image description here

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?

Upvotes: 0

Views: 2353

Answers (1)

TomS
TomS

Reputation: 681

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

Upvotes: 3

Related Questions