SwiperJS images are stacked on top of each other instead of corresponding to a slide

Issue

I am having trouble setting up Swiper Slides in my Ionic React app. I want to implement a feature where you can swipe through the screenshots horizontally, but SwiperJS stacks the images on top of each other. I can still swipe, but the next "slide" is empty. What am I missing here?

<Swiper
            slidesPerView={1}
        >
          {game.data.screenshots.map((screenshot) => (
            <SwiperSlide key={screenshot.id}>
              <IonCard>
                <img src={screenshot.path_full} alt={screenshot.id.toString()} />

              </IonCard>
            </SwiperSlide>
            ))}

Solution

You probably didn't import the CSS file. Here it is:

import "swiper/css";

Also, if you wanted to use any features like navigation or pagination you should import their CSS files alongside their JS files:

import "swiper/css/pagination";
import "swiper/css/navigation";

Answered By - Alan Ari