Question 244942 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Swiper JS component flickering / not working on next js 13 app router

i want to add a simple swiper on my nextjs website (v13 with app router) but it’s giving me all types of errors.

First i tried importing it like i always do by copying it from a demo listed on their website and it was showing up fine but the navigation buttons weren’t working.

So i did more research and found out they released a new version (v10) and are recommending using only the Swiper Element for all future projects but i don’t understand how i’m supposed to import it on nextjs.

I tried downgrading it to v9.4.1 and repeating the usual process i’ve always done but now the whole component is flickering for some reason…

i don’t know what to do, can anyone explain to me how to import the Swiper Element component to nextjs or help me find out why it’s flickering on the older version?

here’s the code for v9.4.1 with the React import:

"use client";
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";

import "../styles/globals.css";

// import required modules
import { Navigation } from "swiper";

export default function SwiperComponent() {
  return (
    <>
      <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

this is globals.css:

#app {
  height: 100%;
}
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

and this is how it looks in package.json:

  "dependencies": {
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "hamburger-react": "^2.5.0",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.11.0",
    "swiper": "^9.4.1",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }
}

this is how i’m importing it on the page:

<main className="text-black md:max-w-[1200px] md:m-auto bg-white font-kumbh h-screen flex flex-col pt-[110px] md:pt-auto z-[0]  relative align-middle items-center justify-center md:w-[95%]">
      <div className="flex md:flex-row flex-col md:gap-[6vw] gap-5  items-center align-middle h-fit justify-center">
        <section className="w-full md:w-1/2 z-[0] relative">
          <SwiperComponent />
        </section>
      </div>
</main>
Tags:

2

Answers


  1. 0

    I think the navigation buttons didn’t work because you import it wrong.
    The correct one:

    import { Navigation } from 'swiper/modules';
    Login or Signup to reply.
  2. 0

    Based on the provided information, it seems there are a few issues with your implementation of the Swiper JS component in your Next.js (v13) app with app router. Let’s break them down and address each one:

    1. Navigation buttons not working:
      The issue might be with how you import the Navigation module from Swiper. Instead of using the following import statement:
    import { Navigation } from 'swiper/react';

    Try importing the Navigation module from ‘swiper/modules’ like this:

    import { Navigation } from 'swiper/modules';

    This should correctly import the Navigation module and make the navigation buttons work.

    1. Importing Swiper Element in Next.js:
      You mentioned that Swiper released a new version (v10) and recommends using the Swiper Element for future projects. To import the Swiper Element in Next.js, you can follow these steps:
    • Install the Swiper package by running the following command in your terminal:
    npm install swiper
    • In your Next.js component, import the Swiper Element like this:
    import SwiperCore, { SwiperElement } from 'swiper';
    • Make sure to also import the required Swiper modules:
    import { Navigation } from 'swiper/modules';
    • Set up the SwiperCore:
    SwiperCore.use([Navigation]);
    • Then you can use the SwiperElement component in your code:
    <SwiperElement navigation modules={[Navigation]} className="mySwiper">
  {/* Add your Swiper slides here */}
</SwiperElement>
    1. Flickering issue on older version (v9.4.1):
      The flickering issue might be unrelated to the Swiper version itself. It could be caused by CSS conflicts or other code issues. Ensure that your CSS classes and styles are properly defined and applied. Additionally, you can try updating other dependencies or reviewing your code for any other potential issues.

    I hope these suggestions help resolve the issues you’re facing with the Swiper JS component in your Next.js app. Let me know if you have any further questions!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search