Swiper grid module is not working in Next.js app

user_2206209 0
Viewed 1870

For two days, I've been really struggling to run a functional Swiper Grid option with my Next.js app. I've tried many stackoverflow solutions and tried different ways to make this grid behavior work with my application, alas! all attempts failed and none of them added a grid feature.

Finally, I implement code examples from Swiper itself. Although the demo code is working on their platform but not in my application. I did nothing but copy the code and create a new page for the Swiper Grid in my Next.js application.

I don't know why it's not behaving as it should. Reference sites and codes are given below:

Working demo reference: https://codesandbox.io/s/20p7zs?file=/src/App.jsx:0-1049

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/grid";
import "swiper/css/pagination";


// import required modules
import { Grid, Pagination } from "swiper";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={3}
        grid={{
          rows: 2,
        }}
        spaceBetween={30}
        pagination={{
          clickable: true,
        }}
        modules={[Grid, Pagination]}
        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>
    </>
  );
}

My Project: enter image description here

Expected output:

enter image description here

My output:

enter image description here

It would be nice to have some expert advice for this Grid specific problem.

swiper.js next.js
5 Answers

I had this problem. Put a height on the container (not the swiper-wrapper container). Unfortunately the swiper js grid module only works with a fixed height.

user_148644820

The solution is to add in _app.js or somewhere else the new css file which comes with the "grid" option :

import "swiper/css/grid";

Then, replace previous css file :

import "swiper/css/bundle";

By

import "swiper/css";

Than what worked for me.

user_153768790

This works for me

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/grid";
import "swiper/css/pagination";


// import required modules
import { Grid, Pagination } from "swiper";

export default function App() {
  return (
    <div style={{ height: '30rem' }}> // just insert any height until the grid fits
      <Swiper
        slidesPerView={3}
        grid={{
          rows: 2,
        }}
        spaceBetween={30}
        pagination={{
          clickable: true,
        }}
        modules={[Grid, Pagination]}
        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>
    </>
  );
}
user_182093630

Just Add this code in a css file:

.swiper-grid-column > .swiper-wrapper{ flex-direction: unset !important; }

And Problem will be solved.

user_160710900

I had the same problem and I was able to control it with this solution Add the grid option fill: "row" and check again

example:

  <Swiper
    slidesPerView={4}
    grid={{
      rows: 3,
      fill: "row",
    }}
    spaceBetween={32}
    pagination={{
      clickable: true,
    }}
    modules={[Grid, Pagination]}
    className="mySwiper"
user_199790180
Related