Swiper grid module is not working as expected

Question

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:

Expected output:

My output:

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

Follett

Swiper mostly has version issues with Nextjs. I suggest you try downgrading the version of Swiper to 7.0.0 or 6.0.0 and try. or find a better alternating library for the purpose. – Arum

remove all css and add import 'swiper/css/bundle'; – Lynda

@Arum I gave that a try without any success. – Follett

@Lynda I already tried also without any success. – Follett

Not sur this is a next.js error only, have the same one with Angular. Maybe it's a new bug – Prostatitis

It is not a bug, see explanation in this answer – Pages

Answer 1

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"
>
  //...
</Swiper>

Tricksy

Thank you adding fill: "row" worked on "swiper": "^9.0.1". So weird, it ain't mentioned in the doc. – Devisal

Answer 2

Just add this code in a css file:

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

And the problem will be solved.

Syndrome

Answer 3

React

you are not getting the same UI of the docs example because if you look in their index.html file, you will see them using "app" as id of the root div

<div id="app">

you are probably using "root" as id, therefore you don't get the same output, because they gave a height to the app wrapper div

#app {
  height: 100%;
}

so if you wrap your swiper component with a div and specify a height it should work as expected you don't need to include fill: "row" in the grid object:

<div div style={{ height: "600px" }}>
  <Swiper>
    //...
  </Swiper>
</div>

---

Nextjs

with Nextjs, you have to convert the styles.css file to styles.module.css then import your styles this way:

import classes from "./styles.module.css";
//...
className={["mySwiper", classes.swiper].join(" ")}
//...
className={classes.swiper_slide} // rename it in the CSS file

then wrap the swiper with a div and give it a height, you will see that styles are applied but you still need to include fill: "row" in the grid object to make it work as expected but in fact, this creates an issue when you have a large number of SwiperSlide, it cannot show them all.

Pages

Answer 4

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 the previous css file :

import "swiper/css/bundle";

By

import "swiper/css";

This worked for me.

Fustic

Answer 5

Something similar can happen in the Swiper v9.1.1 with the Cards effect. Just add:

grid={{rows: 1, fill: "row"}}

Farquhar

Answer 6

.swiper-grid-column>.swiper-wrapper {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
}

Defensible

Please elaborate your answer. – Unvoice

And what is not clear in my answer? In order for the slider to work the way you expect it to in two columns with fill: 'column', you just need to add the following styles – Kallick

You just posted code. Explain what your code does. – Unvoice

Answer 7

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.

Rocaille

Answer 8

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"
      >
        // each swiperslide should have static height too
        <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>
    </>
  );
}

Frequentative

Answer 9

In my case i use...
Swiper settings:

modules={[Grid]}
grid={{rows: 2, fill: 'row'}}

The fill: 'row' is a key.
And CSS property:

.swiper-wrapper {
  flex-direction: unset;
  flex-wrap: wrap;
}

#nextJs, #react

Todd

Answer 10

This is what works for me version ^10

• grid.rows for how many rows
• grid.fill for display as a row and not column
• slidesPerView for how many slides per row

{"slidesPerView": 4, "grid": { "rows": 3, "fill": "row" }}

Gynoecium