React Swiper.js slider only works on page resize

Question

When working with Slider.js React the slider only works after I resize the page. When I click on the next button it does not move to the next slides, I have an onSlideChange that console logs when the slide is changed and it does console log when I click on the next button but it does not move slides. Any help would be appreciated.

import React, { useEffect, useState } from "react";
import axios from "../axios";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

import "../css/Row.css";

// install Swiper modules
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

function Row({ title, fetchUrl, isLargeRow = false }) {
  const [movies, setMovies] = useState([]);

  const base_url = "https://image.tmdb.org/t/p/original/";

  return (
    <>
      {movies && (
        <div className="row">
          <h2>{title}</h2>
          <Swiper
            navigation
            slidesPerView="auto"
            slidesPerGroup={isLargeRow ? 6 : 10}
            loop={true}
            loopedSlides={movies.length || 20}
            observer={true}
            observeParents={true}
            onSwiper={(swiper) => console.log(swiper)}
            onSlideChange={() => console.log("slide change")}
            style={{ width: "100%", height: "100%" }}
          >
            <div className="row__posters">
              {movies?.map(
                (movie) =>
                  movie.poster_path && (
                    <SwiperSlide
                      key={movie.id}
                      className={`${
                        isLargeRow ? "swiper-slide-large" : "swiper-slide"
                      }`}
                    >
                      <img
                        className={`row__poster ${
                          isLargeRow && "row__posterLarge"
                        }`}
                        src={`${base_url}${movie.poster_path}`}
                        alt={
                          movie?.title || movie?.name || movie?.original_name
                        }
                      />
                    </SwiperSlide>
                  )
              )}
            </div>
          </Swiper>
        </div>
      )}
    </>
  );
}

export default Row;

CSS

.row {
  color: white;
  margin-left: 20px;
}

.row__posters {
  display: flex;
  overflow-y: hidden;
  /* overflow-x: scroll; */
  padding: 20px;
}

.row__posters::-webkit-scrollbar {
  display: none;
}

.row__poster {
  max-height: 250px;
  max-width: 150px;
  object-fit: contain;
  margin-right: 10px;
  width: 100%;
  transition: transform 450ms;
}

.row__poster:hover {
  transform: scale(1.08);
  opacity: 1;
}

.row__posterLarge {
  height: 350px;
  width: 350px;
  object-fit: fill;
  max-width: 250px;
  max-height: 350px;
}

.row__posterLarge:hover {
  transform: scale(1.09);
  opacity: 1;
}

.swiper-slide {
  max-width: 150px;
  margin-right: 10px;
}

.swiper-slide-large {
  width: 250px;
  margin-right: 110px;
}

Answer 1

Try adding observer and observeParents on the props of your Swiper component

<Swiper observer observeParents>
...
</Swiper>