こんにちは、ryohei(@ityryohei)です!

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

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

デモ内のスライダーが横ではなく縦方向に動いているかと思います。

最近コンテンツ全体を覆って縦スライドにするサイトをよく見かけますが、「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 {
  height: 420px;
}

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

JS

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

最後に

いかがでしたでしょうか。

Swiper」は使えば使うほど新しい発見がある素晴らしいスライダーです。jQueryも不要なので、スライダーの機能は欲しいけどjQueryはちょっと……というサイトでも活用できますね。これからもどんどん使わせていただきたいと思います!

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