【解説】Swiperで縦方向のスライダーを作る方法【サンプルあり】

記事内に広告を含みます

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙

パソ君

・Swiperで縦方向に動くスライダー作れる？

こんな疑問にお答えします。

デザインによっては縦方向に動くスライダーを作る必要ありますよね。

実はそれSwiperなら簡単に実装可能です。

ジト

すぐにできるよ！

ということで、この記事では「Swiperで縦方向のスライダーを作る方法」について解説していきます！

swiper自体の作り方については下記記事を参考に↓

2023年2月20日【簡単】Swiperの使い方｜初心者向けに解説【オプション】

この記事でわかること

Swiperで縦方向のスライダーを作る方法

【解説】Swiperで縦方向のスライダーを作る方法【サンプルあり】
【解説】Swiperで縦方向のスライダーを作る方法【サンプルあり】：まとめ

【解説】Swiperで縦方向のスライダーを作る方法【サンプルあり】

そんな縦方向に動くスライダーのサンプルがこちら↓

See the Pen swiper　縦方向に動くスライダー by jito-coder (@jito-coder) on CodePen.

縦方向に動きますよね！

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

.swiper {
  height: 425px;
  width: min(100%, 640px);
  margin-inline: auto;
}
@media screen and (max-width: 640px) {
  .swiper {
    height: 61vw;
  }
}

.swiper-button-prev, .swiper-button-next {
  margin: 0;
  right: 20px;
  left: initial;
  transform: rotate(90deg);
}

.swiper-button-prev {
  top: 0;
}

.swiper-button-next {
  top: initial;
  bottom: 0;
}

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        direction: "vertical",
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

コードの中で重要な点がこちら↓

通常通りのスライダーを実装
縦方向にするオプションを記述
親要素の高さを指定
矢印の位置を調整する

順に解説してきます。

➀：通常通りのスライダーを実装

まず通常通りのスライダーを実装するHTMLを組み立てます。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide01">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
        </div>
        <div class="swiper-slide swiper-slide02">
            <img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
        </div>
        <!-- 省略 -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

ここに関してはいつも通りでOKです。

➁：縦方向にするオプションを記述

次にJavaScriptにて、縦方向にするオプションを記述します。

それが「direction: “vertical”,」ですね。

direction: "vertical",

下記3行目のように追加したら、縦方向に動くようになります。

window.onload = function() {
    const swiper = new Swiper(".swiper", {
        direction: "vertical",
        spaceBetween: 20,
        slidesPerView: 1,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
}

➂：親要素の高さを指定

ただしこのままでは、上手くうごきません。

というのも縦方向に動かす場合、親要素の高さを指定する必要があるため。

「.swiper」に対して、heightを指定してあげます。

今回は下記のように指定しました↓

.swiper {
  height: 425px;
  width: min(100%, 640px);
  margin-inline: auto;
}
@media screen and (max-width: 640px) {
  .swiper {
    height: 61vw;
  }
}

「vw」で指定すれば、レスポンシブ対応された縦方向スライダーが実装できますよ。

➃：矢印の位置を調整する

この時点で縦方向に動くスライダーは完成しております。

ですが見た目は下記画像の感じ↓

ドットは自然と右位置になり、矢印はそのままの位置。

どうせなら矢印を上下に置きたいですよね。というわけで最後にCSSにて位置を調整します。

指定する矢印のクラス名がこちら↓

.swiper-button-prev, .swiper-button-next {
  margin: 0;
  right: 20px;
  left: initial;
  transform: rotate(90deg);
}

.swiper-button-prev {
  top: 0;
}

.swiper-button-next {
  top: initial;
  bottom: 0;
}