CODEWITHSUNDEEP
reactjsnext.jsswiper.js
Siddiqui Noor
Siddiqui Noor

Reputation: 7986

Swiper grid module is not working as expected

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.

Upvotes: 18

Views: 18951

Answers (10)

Евгения Авдеева
Евгения Авдеева

Reputation: 51

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

Upvotes: 5

fedesc
fedesc

Reputation: 2610

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" }}

example

Upvotes: 1

Jiř&#237; Zeman
Jiř&#237; Zeman

Reputation: 21

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

Upvotes: 1

Ahmed Sbai
Ahmed Sbai

Reputation: 16189

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.

Upvotes: 3

Amirhossein
Amirhossein

Reputation: 261

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>

Upvotes: 26

Kowshik Shikder
Kowshik Shikder

Reputation: 51

Just add this code in a css file:

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

And the problem will be solved.

Upvotes: 5

Brett Conquilla
Brett Conquilla

Reputation: 1

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.

Upvotes: 0

Alban
Alban

Reputation: 74

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.

Upvotes: 1

Alhan Saha Sadida
Alhan Saha Sadida

Reputation: 1

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>
    </>
  );
}

Upvotes: 0

Nikita Zhukov
Nikita Zhukov

Reputation: 21

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

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

Upvotes: 2

Related Questions