【初心者向け】Swiperの基本的な使い方と設定方法
コードのこと
こんにちは！今回は、ウェブサイトに動きを加える便利なライブラリ「Swiper」の使い方を一緒に学んでいきましょう。
Swiperは、モダンで使いやすいスライダーライブラリです。画像ギャラリーやコンテンツスライダーを簡単に作成できるので、ぜひマスターしてくださいね！
▼実際Swiperで作成した基本的なスライダー
もくじ
Swiperの導入方法
まずはSwiperを使う準備として、必要な2ファイルを読み込みます。
ファイルを読み込むには以下の2つの方法があります。
CDNリンクを利用する方法
簡単に導入するには、CDNリンクを使うのがオススメです。
cssは<head>タグ内、scriptは<body>の閉じタグ前に設置してください。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>Swiperのファイルをローカルにダウンロードする方法
もう一つの方法は、Swiperの公式サイトからファイルをダウンロードして、自分のプロジェクトに追加する方法です。CDNはたまにサーバーダウンすることもあるので、長く運用するサイトの場合はダウンロードして使用するのがおすすめです。
はじめての方はダウンロード場所がなかなか見つけられないこともありますので迷ったら以下記事を参考にしてみてくださいね。
HTMLにSwiperの基本構造を追加する
次に、HTMLにSwiperの基本的な構造を追加します。以下のコードを参考にしてください。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>CSSで見た目を整える
次に、CSSで見た目を整えます。テキストなどを追加することもできますが、今回は画像をスライダーいっぱいに使っているため簡単なスタイル調整を行っています。
img{
width:100%;
height:auto;
}
.swiper-container{
position:relative;/*ボタンのズレ解消*/
}JavaScriptでSwiperを初期化する
const swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});Swiperの基本機能
ループ設定
スライダーをループさせるには、loop: trueを設定します。これでスライダーが最後のスライドから最初のスライドにスムーズに戻ります。
ページネーションの追加
ページネーションを有効にするには、paginationオプションを設定します。クリック可能にする場合は、clickable: trueも追加します。
ナビゲーションボタンの追加
次へ/前へボタンを追加するには、navigationオプションを設定します。nextElとprevElにそれぞれボタンのクラスを指定してください。
Swiperの応用設定
応用でスライダーの自動再生とレスポンシブ対応についても紹介します！
▼応用編を利用して作成できるスライダー
スライダーの自動再生
スライダーを自動再生させるには、autoplayオプションを設定します。例えば、3秒ごとにスライドを切り替えるには以下のようにします。
// 自動再生の設定
autoplay: {
delay: 3000, // 3秒ごとにスライドを切り替える
disableOnInteraction: false, // ユーザーが操作しても自動再生を無効にしない
}Swiperのレスポンシブ対応
slidesPerView: 1,//767px以下
breakpoints: {
768: {
slidesPerView: 2, // 768px以上では2枚表示
},
1024: {
slidesPerView: 3, // 1024px以上では3枚表示
},
}デバイスごとに異なる設定をするには、breakpointsオプションを使用します。例えば、スマートフォンでは1枚表示、タブレットでは2枚表示、デスクトップでは3枚表示にするには以下のように設定します。
全体のコード例
ここまでの設定をまとめた実際のコード例を以下に示します。
<!-- Swiperのコンテナ -->
<div class="swiper-container">
<!-- Swiperのラッパー。スライドを含む -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
<div class="swiper-slide"><img src=""></div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン（次へ） -->
<div class="swiper-button-next"></div>
<!-- ナビゲーションボタン（前へ） -->
<div class="swiper-button-prev"></div>
</div>
<!-- SwiperのJavaScriptを読み込む -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
// Swiperを初期化する
var swiper = new Swiper('.swiper-container', {
// スライダーをループさせる設定
loop: true,
// 767px以下では1枚表示
slidesPerView: 1,
// ページネーションの設定
pagination: {
el: '.swiper-pagination',
clickable: true, // ページネーションをクリック可能にする
},
// ナビゲーションボタンの設定
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 自動再生の設定
autoplay: {
delay: 3000, // 3秒ごとにスライドを切り替える
disableOnInteraction: false, //ユーザーが操作しても自動再生を無効にしない
},
// レスポンシブ対応のブレークポイント設定
breakpoints: {
768: {
slidesPerView: 2, // 768px以上では2枚表示
},
1024: {
slidesPerView: 3, // 1024px以上では3枚表示
},
}
});
</script>Swiperの基本的な使い方と設定方法のまとめ
記事のポイントをまとめます。
- Swiperの基本の2ファイルをCDNもしくはダウンロードして読み込む
- Swiperの基本的なHTMLを記述して、JavaScriptでSwiperを実装する
- Swiperには様々なオプションがある
- レスポンシブ対応や自動再生も可能
いかがでしたか？
Swiperはとても簡単でカスタマイズ性も高いので、いろいろなシチュエーションで活用できます。
今回の基本設定をベースに、実際のWEB制作で試してみてくださいね！
