NextJS 14: Carousels only displaying first slide

[thomasaugot]

Link to the code that reproduces this issue

https://github.com/thomasaugot/wave-riders-ecommerce/blob/main/components/Carousel/Carousel.tsx

To Reproduce

1. Access the code at https://github.com/thomasaugot/wave-riders-ecommerce/blob/main/components/Carousel/Carousel.tsx
2. You can also check the live issue at https://wave-riders-ecommerce.vercel.app/ (there is only a navbar and the carousel right under)

Current vs. Expected behavior

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

Actual Behavior
Only showing one slide

Provide environment information

Operating System:        
  Platform: win32        
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 21.7.3
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app, Developer Experience, Image (next/image), Output (export/standalone)

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), Vercel (Deployed)

Additional context

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. I also tried several other packages offering carousels/swipers, and even written by myself without a package, all the codes I have tried led to the same issue, one slide only. I figured at some point that it looks like the 3 images/ slides are actually appearing yet the last two for just a second, then they vanish, leaving only the first one on screen. It really seems to be the case with every swipers. I also tried "use client", without success...

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:

"use client";
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. I also tried downgrading my NextJS version, nothing 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"
  }
}

Hope someone can help! Thanks :)

[jizhi0v0]

I tried in my project use the same package.json.The different was i didn't use the sass.

"use client";

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";

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

  return (
    <>
      <Swiper
        pagination={{ clickable: true }}
        modules={[Pagination, Autoplay]}
        autoplay={{
          delay: 3000,
        }}
        style={{ width: "100%", height: "100%" }}
      >
        {images.map((imageUrl, index) => (
          <SwiperSlide key={index}>
            <div>
              <Image
                src={imageUrl}
                alt="image"
                layout="fill"
                objectFit="cover"
              />
            </div>
          </SwiperSlide>
        ))}
        <div></div>
      </Swiper>
    </>
  );
};

export default Carousel;

CleanShot.2024-05-10.at.14.34.24.mp4

[thomasaugot]

Crazy... I copy your code, removed the scss and I still get the exact same issue. And this with any kind of carousels I have tried. It must be something else in my code I don't know...

[jizhi0v0]

exact

Yeah,I runned your code and got the same error.

Can you new a clean project then one by one to add these functions.

Maybe i can try this tomorrow if i have more free time.

[thomasaugot]

@jizhi0v0 I found what was causing the issue! In my reset.scss, I was doing

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100vw;
}

Not sure which property was causing the issue but I just replaced "*" with "body". Now it works! So in the end, nothing was wrong with versioning or the swiper itself :) Thanks for your time!

[jizhi0v0]

@jizhi0v0 I found what was causing the issue! In my reset.scss, I was doing

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  max-width: 100vw;

}

Not sure which property was causing the issue but I just replaced "*" with "body". Now it works! So in the end, nothing was wrong with versioning or the swiper itself :) Thanks for your time!

Congratulations！Your websites are pretty！I'm a beginner.