[Swiper]How to create vertical slider and adjust looks

In this article,I will describe about how to create vertical slider with swiper.js.
Furthermore, we will also provide instructions on how to orient navigation and pagination vertically.

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 the slid direction vertical
③Customize the arrows for vertical slider
④Adjust dots position
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: 42vw;
        height: 23vw;
    }
    .sample-slider img{
        width:100%;
    }
</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>
    <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', {
        loop: true,                         //loop
        autoplay: {                         //autoplay
            delay: 2000,  
        },   
        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 vertical slider, otherwise it will not move properly.
Here, I used vw(Viewport Width) to make the slider responsive.

②Make the slid direction vertical

By putting “vertical” at direction option, the slider will move verticaly.

const swiper = new Swiper('.sample-slider', {
    loop: true,                         
    direction: "vertical",    //add
    autoplay: {                        
        delay: 2000,  
    },   
    pagination: {                       
        el: '.swiper-pagination',
    },
    navigation: {                       
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

The slider has become to move verticaly.
Arrows has moved to the right side automatically, but arrows are at the same position.

③Customize the arrows for vertical slider

It is little strange that arrows are at left and right although slider move verticaly, so lets customize it.
Here, I make the arrows direction up and down and put the right side.

.sample-slider [class^=swiper-button]{
    transform:rotate(90deg);
    top: initial;
    left: initial;
    right: 10px;
    margin: 0;
}
.sample-slider .swiper-button-prev{
    top:0;
}
.sample-slider .swiper-button-next{
    bottom:0;
}

Now the arrows are perfect for vertical slider.

④Adjust dots position

Add CSS as below and adjust dots position.

下記のようにCSSを追記して、ドットの縦位置を矢印に合わせます。

.sample-slider .swiper-pagination{
    right:20px;
}

Now it looks good!

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: 60vw;
        height: 33vw;
    }
    .sample-slider img{
        width: 100%;
    }
    .sample-slider [class^=swiper-button]{
        transform:rotate(90deg);
        top: initial;
        left: initial;
        right: 10px;
        margin: 0;
    }
    .sample-slider .swiper-button-prev{
        top:0;
    }
    .sample-slider .swiper-button-next{
        bottom:0;
    }
    .sample-slider .swiper-pagination{
        right:20px;
    }
</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>
    <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', {
        loop: true,                         //loop
        direction: "vertical",              //slide direction
        autoplay: {                         //autoplay
            delay: 2000,  
        },                   
        pagination: {                       //pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       //navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

That is all,It was about how to create vertical slider and adjust looks with swiper.js.

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