スライダーを実装する時に使うことが多いslickに比べ、Swiperはストレスフリーな操作感に加え、jQuery要らずで実装できるので、重宝しています。
この記事ではそんなSwiperを使って、縦スライダーの実装をしてみます。
といっても、Swiperのオプションだけで縦にできるので、解説なのかどうかは疑問ですが・・。
是非最後までご覧いただけると嬉しいです。
Swiperとは?
Swiperは、スライダー・カルーセルUIの超定番とも言えるJavaScriptのライブラリです。
Swiperの利用は簡単で、以下3つの方法で利用することができます。
- npmでインストール
- CDNを利用
- ファイルをダウンロードして利用
とりあえず試してみたい方は、CDNかダウンロードでトライしてみましょう。
jQuery不要で動くので、ブラウザ上での処理も速くなりスライダー・カルーセルを使う場合にとても重宝します。また、オプションも豊富に用意されている為、カスタマイズもしやすいライブラリです。
以下の記事では、このSwiper.jsについて解説していますので以下の記事もあわせてご覧ください。
スライダーの超定番ライブラリSwiper.jsの基本と使い方縦方向のスライダーのサンプル
早速サンプルです。5つの要素を並べて、縦方向に動くスライダーです。
縦のスワイプにも対応しているので、スマホでもスライダーを動かすことができます。
実装の手順と方法
それぞれのコードの解説の前に、実装の手順と方法について簡単にご説明します。
はじめにSwiper本体を読み込ませる必要があるので、以下のコードをHTMLの <head>〜</head>
の中に記述しましょう。
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
この記事では、記述するだけでOKなCDNでの読み込みの場合で進めます。
次に、設置したい場所へHTMLを記述します。この記事で記述しているHTMLのコードは以下の通りです。
<section class="slider-part">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">Slide 1</div>
<div class="swiper-slide slide2">Slide 2</div>
<div class="swiper-slide slide3">Slide 3</div>
<div class="swiper-slide slide4">Slide 4</div>
<div class="swiper-slide slide5">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
次に、JavaScriptのコードをページに記述します。これは、Swiperの動き方を指定するオプションです。
コードは <body>〜</body>
で、</body>
の閉じタグ(クロージングタグ)の前に記述しましょう。
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
mousewheel: true,
autoHeight: true,
speed: 1000,
keyboard: {
enabled: true,
},
mousewheel: {
releaseOnEdges: true,
forceToAxis: true,
sensitivity: 1,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
slideChange: function () {
setTimeout(function () {
swiper.params.mousewheel.releaseOnEdges = false;
}, 500);
},
reachEnd: function() {
setTimeout(function () {
swiper.params.mousewheel.releaseOnEdges = true;
}, 750);
}
},
});
最後に、CSSの記述をします。
section.slider-part {
position: relative;
height: 400px;
overflow: hidden;
}
section.slider-part .mySwiper {
height: 100%;
background: #f1f1f1;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
-ms-touch-action: auto;
touch-action: auto;
}
.swiper-slide.slide1, .swiper-slide.slide3, .swiper-slide.slide5 {
background: #daf5ff;
}
ざっくりとしたコードの解説
コードはHTML・JavaScript・CSSの3種です。ざっくりですが、順に解説していきます。
HTML
HTMLは、CDNで記述する内容と、スライダーを設置する内容の2種類です。
まずは、CDNでSwiper本体読み込ませる記述は、以下のコードをHTMLの <head>〜</head>
の中に記述します。
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
そして次に、Swiperでスライダーを設置します。コードは以下で、設置したい場所に設置します。
<section class="slider-part">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">Slide 1</div>
<div class="swiper-slide slide2">Slide 2</div>
<div class="swiper-slide slide3">Slide 3</div>
<div class="swiper-slide slide4">Slide 4</div>
<div class="swiper-slide slide5">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
div
タグの中で「mySwiper」のclass名がつく要素は、JavaScriptのコードでSwiperのオプション指定でも出てくるので、名前を書き換える場合は、JavaScriptのコード冒頭にある箇所の名称も合わせるようにします。
JavaScript
JavaScriptは、縦方向のオプションにあたる direction: "vertical",
を指定して、Swiperのオプションを記述していきます。
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: 1,
mousewheel: true,
autoHeight: true,
speed: 1000,
keyboard: {
enabled: true,
},
mousewheel: {
releaseOnEdges: true,
forceToAxis: true,
sensitivity: 1,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on: {
slideChange: function () {
setTimeout(function () {
swiper.params.mousewheel.releaseOnEdges = false;
}, 500);
},
reachEnd: function() {
setTimeout(function () {
swiper.params.mousewheel.releaseOnEdges = true;
}, 750);
}
},
});
ここで出てくるパラメータや、モジュールは、Swiperで使える全体のごく一部でこれ以外にたくさんあります。
外部リンク 利用できるパラメータやモジュール(英語)
これらのパラメータをいじるだけでも簡単にUIを変更できるので、是非色々いじってみてください。
CSS
スライダーの基本部分にあたるレイアウトはSwiper本体のCSSにあるので、個別に記述するCSSはカスタマイズするコード内容がメインになると思います。
section.slider-part {
position: relative;
height: 400px;
overflow: hidden;
}
section.slider-part .mySwiper {
height: 100%;
background: #f1f1f1;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
-ms-touch-action: auto;
touch-action: auto;
}
.swiper-slide.slide1, .swiper-slide.slide3, .swiper-slide.slide5 {
background: #daf5ff;
}
上記のコードは、スライダーで表示される各スライドの色味と、表示レイアウトを整える程度の内容です。
さいごに
スライダーを作る時、以前まではjQueryのslickをよく使っていましたが、Swiperは簡単に色々できるライブラリなので、今はこちらを愛用しています。
本当に色々できるので、是非参考にして使ってみてください。