NextJS 14: Swiper only shows first slide

[thomasaugot]

Check that this is really a bug

• I confirm

Reproduction link

https://wave-riders-ecommerce.vercel.app/

Bug description

Hi everyone,

In my NextJS 14 app, I am trying to get a Swiper working.
My issue is that only the first slide works, the other ones are not visible. When I console.log my slide images to ensure they are loaded correctly, I can see that they are so the issue isn't there. If I put the same image for all the slides, only the first one loads still. So the issue isn't from the images I am trying to use in my swiper.

You can check the issue on this page, it's the carousel swiper on this same page: https://wave-riders-ecommerce.vercel.app/

Please note that the first slide is also controllable with the mouse while the other 2 aren't. Which means they probably just aren't there, while the pagination shows my three items properly...
Here is my code:

import React, { useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/scss";
import "swiper/scss/pagination";
import { Autoplay, Pagination } from "swiper/modules";
import Image from "next/image";
import slide1 from "../../public/assets/img/surfboard.jpg";
import slide2 from "../../public/assets/img/beach-surfers.jpg";
import slide3 from "../../public/assets/img/homepage-bg.jpg";
import "./Carousel.scss";

export const Carousel: React.FC = () => {
  const images = [slide1, slide2, slide3];

  console.log("slide 1: ", slide1); // output: slide 1:  Object{...}
  console.log("slide 2: ", slide2); // output: slide 2:  Object{...}
  console.log("slide 3: ", slide3); // output: slide 3:  Object{...}

  return (
    <>
      <Swiper
        pagination={{ clickable: true }}
        modules={[Pagination, Autoplay]}
        autoplay={{
          delay: 3000,
        }}
        className="swiper"
      >
        {images.map((imageUrl, index) => (
          <SwiperSlide key={index} className="swiper__slide">
            <div className="swiper__slide__img-container">
              <Image
                src={imageUrl}
                alt="image"
                layout="fill"
                objectFit="cover"
                className="swiper__slide__img-container__img"
              />
            </div>
          </SwiperSlide>
        ))}
        <div></div>
      </Swiper>
    </>
  );
};

I have tried downgrading my swiper version as I used it in a recent NextJS project in which I had no issue, but no luck either.
Here is what my current package.json looks like, in case it may help...

{
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.3",
    "@supabase/supabase-js": "^2.43.1",
    "dotenv": "^16.4.5",
    "next": "14.2.3",
    "react": "^18",
    "react-bootstrap": "^2.10.2",
    "react-dom": "^18",
    "react-icons": "^5.2.1",
    "sass": "^1.77.0",
    "swiper": "^11.0.5"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "typescript": "^5"
  }
}

Expected Behavior

The swiper should display all 3 slides/Images instead of just one.

Actual Behavior

Only showing one slide

Swiper version

11.0.5

Platform/Target and Browser Versions

Chrome 124 on Windows 10

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR