[Swiper]How to create grid slider

In this article,I am going to describe how to create grid slider using swiper.js.

I’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper] How to create a simple slider with swiper.js

Table of Contents

①Create a normal swiper slider
②Make shown slide 2 columns
③Make shown slide 2 rows.
The full text of source code

①Create a normal swiper slider

To make it clear, we will create normal swiper slider first and then make changes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width: 40vw;
        height: 23vw;
    }
    .sample-slider img{
        width: 100%;
        vertical-align: bottom;
    }
</style>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
        <div class="swiper-slide"><img src="./img/sample5.png"></div>
        <div class="swiper-slide"><img src="./img/sample6.png"></div>
        <div class="swiper-slide"><img src="./img/sample7.png"></div>
        <div class="swiper-slide"><img src="./img/sample8.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        pagination: {                       //pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

Now we can see normal swiper slider.

We need to specify height property when creating grid slider, otherwise it will not move properly.
Here, I used vw(Viewport Width) to make the slider responsive.

What’s more, if you set loop option true, it will not move properly.

②Make shown slide 2 columns

Let’s make shown slide 2 columns. In order to increase columns, we need to specify slidesPerView option.
Adjust slide gap by spaceBetween option.

const swiper = new Swiper('.sample-slider', {
    slidesPerView: 2,        //added
    spaceBetween: 10,        //added
    pagination: {                       
        el: '.swiper-pagination',
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

Now shown slide become 2 columns.

③Make shown slide 2 rows.

Let’s make shown slide 2 rows. In order to increase rows, we need to specify grid option.
Additionally, it is necessary to specify height:auto for swiper-slide in CSS.

<style>
    .sample-slider .swiper-slide{       /*added*/
        height: auto;                   /*added*/
    }                                   /*added*/
</style>
<script>
    const swiper = new Swiper('.sample-slider', {
        slidesPerView: 2,
        spaceBetween: 10,
        grid: {                         //added
            rows: 2,                    //added
        },                              //added
        pagination: {                       
            el: '.swiper-pagination',
        },
        navigation: {                       
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

Now, we can see grid slider!

The full text of source code

In the end, I put the full text of source code.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width: 40vw;
        height: 23vw;
    }
    .sample-slider .swiper-slide{
        height: auto; 
    }
    .sample-slider img{
        width: 100%;
        vertical-align: bottom;
    }
</style>


<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
        <div class="swiper-slide"><img src="./img/sample5.png"></div>
        <div class="swiper-slide"><img src="./img/sample6.png"></div>
        <div class="swiper-slide"><img src="./img/sample7.png"></div>
        <div class="swiper-slide"><img src="./img/sample8.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>


<script>
    const swiper = new Swiper('.sample-slider', {
        slidesPerView: 2,　　　　　　　　　　//column count of shown slide
        spaceBetween: 10,　　　　　　　　　　//gap of slides
        grid: {                            //row count of shown slide
          rows: 2,
        },          
        pagination: {                       //pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

That’s all, it was about how to create grid slider using swiper.js.

I have been introduced various slider which can be made by swiper.js.
Swiper Demo 22 Slider