Next js + Swiper Js

[howtorespawn]

Check that this is really a bug

• I confirm

Reproduction link

unable to reproduce with codespace.
Look below for method

Bug description

This only happens with Next js + react
I tried with Vite and it works fine. I also did made a new next js app and tried on it but results were same

These were the commands to reproduce app and swiper.

reproduce it in in system

❯ npx create-next-app@latest
✔ What is your project named? … name
✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No /
✔ Would you like to use src/ directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No

Copy the code of any repo from demos and paste it in your documents
(remember to change to global.css or make styles.css file)
add
"use client"
on top of document.

npm run dev
to local host it (most likely its localhost:3000)

NOTE

MAKE SURE IT HAS loop={true} else it wouldnt work

mini = minimize
max = maximize
if the windows is mini then make it max and if its max then make it mini (vice versa) (just once so dont make it like mini > max > mini or other way around)
wait for few seconds to see if animation as stopped
if not then try to make it max if mini or vice versa (just once)
wait few seconds and see the result.

Try it few times and check if there is any problem

OS AND BROWSER:

i used chrome for windows 7
and fire fox and chromium with Arch Linux (with kde + hyprland + bspwm)

all of them stopped working
here is a live preview of the code i used in my website

check on your system with live preview of page

https://nextjsdronetest.vercel.app/

here is a youtube video: (unedited)
https://youtu.be/9dFekiHhZ14 since "This video is too big. with a file size less than 10MB." github thingy

Expected Behavior

like the vite version
next js should be able to run this without problem but thats the funny part
yea idk what else to write here

Actual Behavior

auto play stops working.
you have to resize the windows or swipe a little to get it started again

Swiper version

Swiper 10 i think since its the latest

Platform/Target and Browser Versions

windows 7 with chrome. arch linux with chromium and firefox on bspwm, hyprland, KDE

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

EDITS:
added headings and confusing line

[myyellowshoe]

Whats your code look like? My was not working similarly with nextjs but I realized it actually had more todo with my setup in react. Try this.

"use client";

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";

// import Swiper and modules styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/autoplay";

export default function EarthFriendlySlider() {
  return (
    <section className="earth-friendly">
      <h1 className="heading-3">
        We build luxury to be
        <br />
        Earth-friendly and affordable
      </h1>
      <Swiper
        modules={[Navigation, Pagination, Autoplay]}
        spaceBetween={50}
        slidesPerView={1}
        pagination={{ clickable: true, type: "bullets" }}
        autoplay={{ delay: 4000 }}
        loop={true}
      >
        <SwiperSlide>
          <div className="_19factories"></div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="white-glove"></div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="eco-friendly"></div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="e-commerce"></div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="middlemen"></div>
        </SwiperSlide>
      </Swiper>
    </section>
  );
}