【Swiper】
コピペでカンタン実装♪
スライダーの作り方まとめ
「jQuery」を使わず、本格的なスライダーを簡単なコードで実装できる java script ライブラリ「Swiper」！
簡単なコードで実装できるとは言っても、一番シンプルなスライダーを実装するにも独自の記述が必要で、java script初心者にはちょっとハードルが高く感じる部分もありますよね。
そこで、ここでは「Swiper」を利用したスライダーを、コピペで実装できるように必要な記述をまとめてみました。
時短したいとき、java scriptはよく分からないけど本格的なスライダーを実装したい時などに、よければ使ってみてくださいね。
それでは早速、「Swiper」とコピペで作るスライダーの作り方を見ていきましょう！
「Swiper」を使うメリットは？
有名どころでは「slick」など、スライダーを簡単に実装できるライブラリは「Swiper」だけではありません。
その中で「Swiper」を選ぶ決め手になったのは、スマートフォンでよくやる「ななめなぞり」でも、なめらかな動きが実装できたからです。
他のライブラリだと動きが渋くなったりしましたが、「Swiper」なら、すいすい動く！
ちょっと容量は大きめで、公式マニュアルは英語といったデメリットもありますが、現在もアップデートが続けられており、高品質なスライダーをカンタンに実装することができます。
Swiperでスライダーを作る手順
「Swiper」でスライダーを作る基本的な手順は、以下となります。
①「Swiper」のjsファイルとCSSファイルを読み込む
②ページとなるHTMLファイルなどにスライダーを設置する
③jsファイルに初期設定コードを記述する
あとは、お好みでCSSで見た目を整えて完成です。
「Swiper」の導入手順から丁寧に解説されている記事はネット上に沢山あるので、じっくり取り組みたい場合は、ぜひそちらも参考にしてみてくださいね。
ここではコピペで実装するのが目標なので、先にコピペでさくっとファイルを揃えてから、各コードの解説をさらっと見ていきたいと思います。
コピペで作るスライダー
まずは、ここで実装するスライダー2つを見ていきましょう！
1つめはこちら。「Swiper」で用意されている基本的なスライダーです（調整は表示位置のみ）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<style>
.swiper{
width: 200px;
text-align: center;
}
/*スライダーのサイズ調整*/
.swiper img{
width: 200px;
}
</style>
<title>サンプル</title>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="1.png" alt=""></div>
<div class="swiper-slide"><img src="2.png" alt=""></div>
<div class="swiper-slide"><img src="3.png" alt=""></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>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper',{
spaceBetween: 10,
slidesPerView: 1,
speed: 500,
autoplay:{
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});
</script>
</body>
</html>
2つめはこちら。「Swiper」の基本的なスライダーを個人的に使いやすいようにカスタマイズしたものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<style>
/*ページネーションを要素内におく*/
.swiper-box{
position: relative;
}
.swiper-box .swiper{
width: 240px;
text-align: center;
}
/*スライダーのサイズ調整*/
.swiper-box .swiper img{
width: 200px;
}
/*ページネーションの位置を調整*/
.swiper-box .swiper-pagination{
bottom: -35px !important;
}
/*ページネーションの色を変更*/
.swiper-box .swiper-pagination-bullet{
background: pink;
}
</style>
<title>サンプル</title>
</head>
<body>
<div class="swiper-box">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="1.png" alt=""></div>
<div class="swiper-slide"><img src="2.png" alt=""></div>
<div class="swiper-slide"><img src="3.png" alt=""></div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper',{
loop: true,
spaceBetween: 10,
slidesPerView: 1.2,
centeredSlides: true,
speed: 500,
autoplay:{
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>
カスタマイズ版スライダーでの主な変更点は3つです。
基本的なスライダーにある、アロー型のナビゲーションとスクロールバーを削除。
ページネーションをスライダーの外に移動して色を変更。
スライダーの両端で前後の画像を少しだけ表示。
といった感じ。
両方のソースを用意してあるので、お好みの方をコピペしてみてくださいね。
コピペしたら「test.html」などのファイル名で保存、ブラウザで表示して動きを確認してみましょう。
動きが分かりやすいように2～3枚ほど画像ファイルを用意して、同階層に設置してください。
コピペコードでは画像ファイルは「1.png」「2.png」「3.png」としてあるので、必要に応じて変更してください。
オンライン環境なら、このコピペファイルだけでスライダーが動くかと思います（推奨最新版Chrome）。
コピペで実装するだけならこれで完了ですが、基本的な内容が分かっていると、あとあとカスタマイズもしやすくなります。
ここからは「Swiper」の基本的な導入手順とコードの内容を見ていくので、カスタマイズやコード内容に興味のある方は、ぜひ一緒に確認していきましょう！
Swiperでコピペで作るスライダー！解説
ここではコピペで「Swiper」のスライダーを実装できるように、全てHTMLファイル1枚にまとめてありますが……、
先述したように、「Swiper」のスライダーを最初から実装する場合は、
①「Swiper」のjsファイルとCSSファイルを読み込む
②HTMLファイルなどにスライダーを設置する
③jsファイルに初期設定コードを記述する
といった手順を踏みます。
コピペコードではいきなりCDNという方法で導入していますが、リンク先にその他の基本的な「Swiper」の導入方法をまとめてあるので、カスタマイズなどに興味がある場合はこちらも確認してみてくださいね。
また、「Swiper」で用意されているCSSファイルは2種類あり、1つは基本的な装飾があらかじめセットされているCSSファイルで、もう1つは必要最小限のスタイルのみのCSSファイルとなっています。
ここでは、読み込むとすぐに基本的なスライダーが完成する「swiper-bundle.min.css」を採用しています。
まとめると！
今回のコピペコードではCDNで「Swiper」を導入、CSSは「swiper-bundle.min.css」を採用している、ということですね。
必要があれば、お好みで変更してみてくださいね。
とうことで、ここからは具体的にコピペコードの解説を見ていきましょう！
初心者さんにも分かりやすいように、基本部分、HTML部分、CSS部分、java script部分に分けて見ていきたいと思います。
基本部分
以下はコピペファイルで動作確認できるようにするための、HTMLファイルの必要最小限の基本コードです。
この中に、「Swiper」のスライダー作りに必要なコードを書き込んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>サンプル</title>
</head>
<body>
</body>
</html>
HTML部分
最初に書き込むのはCSSファイルの読み込みコードです。
head内に設置してあります。
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
次に、jsファイルの読み込みコードです。ここではbody内スライダー下に設置しています。
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
いよいよスライダー部分のコードを書き込んでいきます！
スライダー部分は、基本的なスライダーとカスタマイズ版とで、内容が少し違います。
まずは基本的なスライダーのコードはこちら。
「Swiper」でスライダーを作る場合の基本構成です。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></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>
「swiper>swiper-wrapper>swiper-slide」とclassのついた要素が入れ子になっていて、「swiper-slide」要素を増やすとスライドの枚数を増やすことができます。
スライドにしたい画像などを「swiper-slide」要素の中に設置すれば完成です。
注意点としては、正常に動かなくなるので、基本構成要素のclass名は変更しないようにしましょう。
また、「swiper-wrapper」と「swiper-slide」の間に要素を入れると動かなくなるなどの制限があります。
「swiper」内には要素を追加しても大丈夫なので、要素を追加するときは設置位置に注意しましょう。
カスタマイズしたスライダーのコードはこちらです。
<div class="swiper-box">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="1.png" alt=""></div>
<div class="swiper-slide"><img src="2.png" alt=""></div>
<div class="swiper-slide"><img src="3.png" alt=""></div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
主な変更点は2つです。
ナビゲーション（アロー）とスクロールバーを削除、基本のスライダーコードをdivで囲んで、ページネーションを「swipe」要素の外に移動しています。
これだけだと、ページネーションがページ最下部に飛んでいってしまうので、CSSで追加要素に「position: relative」を指定して、ページネーションの位置を調整しています。
スライドの中身は画像ファイルをセットしています。
CSS部分
基本的なスライダーに追加したCSSはこちら。
見やすいように主に表示サイズや位置を調整しています。
<style>
.swiper{
width: 200px;
text-align: center;
}
.swiper img{
width: 200px;
}
</style>
こちらはカスタマイズ版用の追加CSSになります。
スライダーの表示位置の調整や、ページネーションの位置調整や色の変更をしています。
<style>
/*ページネーションを要素内におく*/
.swiper-box{
position: relative;
}
/*スライダーのサイズ調整*/
.swiper-box .swiper{
width: 240px;
text-align: center;
}
.swiper-box .swiper img{
width: 200px;
}
/*ページネーションの位置を調整*/
.swiper-box .swiper-pagination{
bottom: -35px !important;
}
/*ページネーションの色を変更*/
.swiper-box .swiper-pagination-bullet{
background: pink;
}
</style>
ここではHTMLファイルに直書きしていますが、必要に応じてCSSファイルに移動したり、お好みでカスタマイズしてくださいね。
java script部分（スライダーの初期設定）
「Swiper」を使う際は、「初期設定」と呼ばれるスライダーのセットアップコードを追記します。
「Swiper」で用意されているオプションや基本設定の値などを指定するもので、必ず「Swiper」の本体コードのあとに読み込んだり、記述したりします。
jsファイルを作成して別途読み込んでもいいですし、ダウンロードして利用する場合は「Swiper」本体のjsファイルに追記してもOKです。
※jsファイルに移動する場合は「<script></script>」は不要です。
今回のコピペコードでの初期設定の最小構成はこちら。
const swiper = new Swiper('.swiper',{
});
「const swiper = new Swiper('.swiper',{」と「});」の間に、使いたい機能を書き足していきます。
「const ◯◯ = new Swiper('.swiper',{」の ◯◯部分は任意で設定可能です。
前置きはここまで！
ここからは、実際に今回のコピペコードで指定してあるセットアップの内容を見ていきましょう！
基本的なスライダーのセットアップ
基本的なスライダーでの指定している初期設定はこちらになります。
const swiper = new Swiper('.swiper',{
spaceBetween: 10,
slidesPerView: 1,
speed: 500,
autoplay:{
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
});
上から順番に見ていきましょう！
「spaceBetween」はスライド間の余白を指定できます。px単位で反映されます。
「slidesPerView」は一度に表示するスライドの数を指定します。ここでは「1」。
「speed」はスライドの切り替わる時間をミリ秒単位で指定します。500=0.5秒となります。2000とかにすると、ぬる～んとスライドが切り替わります。
「autoplay」は自動再生についての設定をまとめて行うもので、ここで指定しているのは2つです。
「delay」は自動再生の実行間隔をミリ秒単位で指定します。2000=2秒ですね。
「disableOnInteraction」はユーザーがスライド画像をタッチまたはクリックした際に、自動再生を終了するか続けるかを指定します。 ユーザー操作時に自動再生を終了する場合は「true」、自動再生を続ける場合は「false」を指定します。
「pagination」はページネーションについての設定をまとめて行うもので、ここで指定しているのは2つです。
「el」にはHTMファイルにあるページネーション要素のクラス名を指定します。
「clickable」は、ページネーションとスライダーの連動設定を指定します。 ページネーションのクリックでスライドを切り替える機能を有効にする場合は「true」、無効にする場合は「false」を指定します。
また、ここでは使っていませんが、「Swiper」にはデフォルトのページネーションの他に、「1/3」といった数字のページネーションや、視覚的なプログレスバータイプのページネーションも用意されているので、お好みで使ってみてくださいね。
pagination: {
el: '.swiper-pagination',
clickable: true,
//数字タイプ
type: 'fraction',
//プログレスバータイプ
type: 'progressbar',
//デフォルト
type: 'bullets',
},
「nextEl」には、右側のナビゲーション（「進む」）にあたる要素のclass名を指定します。
「prevEl」には、左側のナビゲーション（「戻る」）にあたる要素のclass名を指定します。
「scrollbar」はナビゲーションについての設定をまとめて行うもので、ここで指定しているのは2つです。
「el」には、HTMLにあるスクロールバー要素のclass名を指定します。
「draggable」はスクロールバーとスライダーの連動設定を指定します。 スクロールバーのタッチやクリックなどでスライドを切り替える機能を有効にする場合は「true」、無効にする場合は「false」を指定します。
カスタマイズ版スライダーのセットアップ
ここでは、カスタマイズスライダーにのみ使った指定を3つほど見ていきます。
const swiper = new Swiper('.swiper',{
loop: true,
spaceBetween: 10,
slidesPerView: 1.2,
centeredSlides: true,
speed: 500,
autoplay:{
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
「loop」は、スライダーのループ設定を指定します。 スライダーをループする場合は「true」、一周して止める場合は「false」を指定します。
ちなみに、この「loop」は「Swiper」の「スクロールバー」と併用できません。
「Swiper」では内部でスライドを複製することでループを実現していますが、スクロールバーにはコピースライドも反映されてしまうので、位置が合わなくなってしまいます。
なので、「スクロールバーあり」の基本的なスライダーの方には「loop」指定がありません。
そのかわり、「autoplay」で「スライドの最後になると最初のスライドに戻る」という動きになっています。
「slidesPerView」は一度に表示するスライドの枚数指定ですが、カスタマイズ版では「1.2」を指定しています。
「centeredSlides」はスライドの中央配置を指定します。 スライダー内の画像を中央に表示する場合は「true」中央に表示しない場合は「false」を指定します。
CSSと「slidesPerView」と「centeredSlides」の指定で、スライダーの両端に前後の画像をちょこっとだけ表示しています。
コピペで作るスライダーの注意点
お疲れ様でした！
ここまで、「Swiper」を活用してコピペでスライダーを実装する方法と、実際のコード内容を見てきました。
仕上げとして、「Swiper」のスライダーをコピペで作るときの注意点を1つだけ。
「Swiper」は現在も活発に開発されているライブラリで、バージョンによってコードの記述が変わることがあります。
今回のコピペコードではCDNで「v.8」を指定して読み込んでいますが、CDNで別のバージョンを指定しても正常に動かないかも知れません。
また、公開されているファイルに変更や削除がないとも限らないので、安定して動かしたい場合はライブラリをダウンロードして利用することをおすすめします。
基本的には最新版や最新の安定版を利用するのが望ましいので、バージョン違いで動かない場合は新しい情報を探してみるのも重要ですね。
「Swiper」で高品質なスライダーを実装してウェブページ制作に役立てましょう！
