myyellowshoe
commented
3 weeks ago 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>
);
}
Check that this is really a bug
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 (@/*)? … NoCopy 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
Would you like to open a PR for this bug?
EDITS: added headings and confusing line