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

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?

imported swiper.css correctly?

fixedDrill
– fixedDrill

2022-02-24 11:34:34 +00:00
Commented Feb 24, 2022 at 11:34 — fixedDrill
– fixedDrill, Commented Feb 24, 2022 at 11:34

TomS · Accepted Answer · 2022-02-24 15:24:21Z

3

+50

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

answered Feb 24, 2022 at 15:24

TomS

6815 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FinalGirl321 Feb 5 at 10:23

typescript? This is js

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related