【Swiper】directionにverticalを指定して縦スライドを作成する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperで縦方向に動くスライダーの作り方をご紹介しています。

完成イメージは下記の通りです。

See the Pen Swiper Vertical Direction by ryohei (@intotheprogram) on CodePen.

デモ内のスライダーが横ではなく縦方向に動いているかと思います。最近コンテンツ全体を覆って縦スライドにするサイトをよく見かけますが、「Swiper」なら基本的なオプションに一行加えるだけで縦方向に動くスライダーが作成できます。検討されている方は「Swiper」で実装してみてはいかがでしょうか。

では、解説していきます。

Swiperを読み込む

まずは「Swiper」本体のファイルをHTMLに読み込みます。

「Swiper」は開発者様からCDNが提供されていますので、下記を追加するだけで簡単に「Swiper」を使用することができるようになっています。

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

上記のサンプルでは「CSS」と「Script」を続けて読み込んでいますが、特に意味はありませんので、それぞれ任意の場所に記述していただければと思います。

さて、これで準備は完了ですね！さっそく縦方向に動くスライダーを作ってみましょう！

縦方向に動くスライダーを作っていく

まずはスライダーの表示を決めるHTMLのレイアウトから。

サンプルは公式サイトに記載されているものから必要ないものを除いて使用しています。「Pagination」や「prev・next」が必要な場合は追加しましょう！

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="sample001.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample002.jpg" alt=""></div>
        <div class="swiper-slide"><img src="sample003.jpg" alt=""></div>
    </div>
</div>

続いてスタイルを付けていきます……といってもコンテナに少し追加するくらいで大丈夫です！高さはスライダーを設置する環境によって変わってくる部分なので、それぞれ任意の値を指定しましょう。

CSS

.swiper-container {
    width: 100%;
    max-width: 940px;
    height: 500px;
    margin: 0 auto;
}

最後にスクリプトを指定してスライダーを動かします。サンプルではほとんど基本的なオプションだけを使用しています。スライドする方向は「direction」で設定することができます。オプションに[vertical」を指定するだけで縦方向に動かすことができます。

JS

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    effect: 'slide',
    slidesPerView: 1,
    loop: true,
    autoplay: {
        delay: 2000,
    },
})

最後に

「Swiper」は使えば使うほど新しい発見がある素晴らしいスライダーです。最近は脱jQueryの風潮ですので、jQueryが使用できない環境でも活用できるのは魅力ですよね。これからもどんどん使わせていただきたいと思います。

以上、Swiperで縦方向に動くスライダーのご紹介でした！