NextJS 14: Carousels only displaying first slide about next.js

[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.

[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!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.