はじめに
今回の記事では、JavaScriptのSwiperというライブラリについて
実際に使ってみた感想も踏まえて解説したいと思います。
結論から言うと、かなり簡単に時間をかけずに実装ができます。
JavaScriptの無料実践学習
とにかく手を動かしながらJavaScriptの学習を始められるサイトです。
また、忍者CODEでは有料コンテンツも用意されており、更にスキルを伸ばしたい方には低コストで学習できるサービスです。
Swiperとは？使用に至った理由
私はWebアプリを制作する中で、トップページは印象に残りやすい動きのあるものがいいなと考えておりました。
検索をしているとjQueryを使った実装が多く、これまでjQueryを触ったことがなかった私にとっては学習コストがかかってしまうため、
ほかの方法を探していたところjQueryが不要な「Swiper」にたどり着きました。
Swiperを導入することで可能なこと
- スライドをループさせる
- スライドのスピードを変更できる
- スライドの自動再生
- スクロールバーの表示
- スライドにページネーションを付けられる
- スライドにホバーした時にズームインする
※他にもいろいろあります
Swiperの導入手順
手順は2つだけです。
- ファイルの読み込み
- HTMLとJSのコーディング
ファイルの読み込み
ファイルを読み込む方法は2パターンあり、CDNでSwiperを読み込む方法と、NPMなどからダウンロードしてローカル環境に設置してから読み込む方法があります。
手っ取り早く利用するのであれば、CDNから読み込む方法がおすすめです。
CDNの場合、公式サイトの最新版のCDNを読み込んでください。
HTML
<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>
HTML・CSS・JSのコーディング
HTML
<!-- スライダーのコンテナ -->
<div class="swiper">
<!-- 必要に応じたwrapper -->
<div class="swiper-wrapper">
<!-- スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- 必要に応じてページネーション -->
<div class="swiper-pagination"></div>
<!-- 必要に応じてナビボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 必要に応じてスクロールバー -->
<div class="swiper-scrollbar"></div>
</div>
CSS
.swiper--wrapper {
/* wrapperのサイズを調整 */
width: 100%;
height: 300px;
}
.swiper-slide {
/* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
color: #ffffff;
width: 100%;
height: 100%;
text-align: center;
line-height: 300px;
}
.swiper-slide:nth-child(3n + 1) {
/*1、4、7、3n+1枚目の背景色 */
background-color: #de4439;
}
.swiper-slide:nth-child(3n + 2) {
/*2、5、8、3n+2枚目の背景色 */
background-color: #fcd500;
}
.swiper-slide:nth-child(3n + 3) {
/*3、6、9、3n+3枚目の背景色 */
background-color: #53c638;
}
JavaScript
const swiper = new Swiper(".swiper", {
// ページネーションが必要なら追加
pagination: {
el: ".swiper-pagination"
},
// ナビボタンが必要なら追加
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});