- 2022.10.18
- JavaScript
- GIV_wataru
Swiper.jsでスライドショーを制作する方法
WEBサイトを制作している際に画像を横並びにしたいケースがあります。ただ幅には限度があるため多くの画像を並べられません。そこで活用したいのがスライドショーです。スライドショーならば、限度がある幅に対しても多くの画像をスライドして見せられます。そこで今回は、スライドショーを制作する際に便利な「Swiper.js」の使い方を紹介します。
CDNで読み込む、もしくはファイルを読み込む
SwiperはCDNで読み込んで使うか、ファイルを読み込んで使うかの2つの方法があります。
今回はCDNで読み込んでスライドショーを作る方法を解説していきます。
↓SwiperのCDNは次のリンクに載っています。
https://swiperjs.com/get-started
CDNには下記のようにCSSとjsの2つがあるので両方を設置しましょう。
<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やjavascriptを記述する
下記がswiperのベースになるHTMLの記述です。
▢HTMLファイル
<section class="swiper_box">
<h1 class="production_achieve">スライドショー</h1>
<div class="swiper">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
</div>
</section>
下記がswiperのベースになるjavascriptの記述です。
▢jsファイル
const swiper = new Swiper(".swiper", {
});
上記のHTMLとjavascriptの記述だけで下記のように最低限のスライドショーが作成できます。スライド部分のCSSは自身の好きなように調整してみてください。
See the Pen
Untitled by wataru🐧 (@mimori_5046)
on CodePen.
左クリックをしながら、左にマウスを動かすと画像がスライドして、次の画像が表示されます。
スライドボタンやページネーションなどのオプションを設定する
最低限のスライドショーの作成をしたら、次はスライドボタンやページネーションの設置、スライドの速さの設定などのオプションを付け加えて、自分好みのスライドショーを作成していきましょう。ここからはSwiperでよく使うオプションを紹介します。
スライドボタンの設置
スライドボタンを設置すれば、ボタンをクリック・タップすることにより、スライドを動かせます。スライドボタンを設置するには、HTMLとjsファイルに以下の記述を行います。
▢HTMLファイル
<div class="swiper">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<!-- スライドボタンの設置-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
▢jsファイル
const swiper = new Swiper(".swiper", {
<!-- スライドボタンの設置-->
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
});
上記の記述をするとスライドボタンは下記のように設置できます。
See the Pen
Untitled by wataru🐧 (@mimori_5046)
on CodePen.
ページネーションを設置する
ページネーションがあれば、現在自分が何枚目のスライドを表示しているのかが、一目で分かります。ページネーションを設置するには、HTMLとjsファイルに以下の記述を行います。
▢HTMLファイル
<section class="swiper_box">
<h1 class="production_achieve">スライドショー</h1>
<div class="swiper">
<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 class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- ページネーションの設置-->
<div class="swiper-pagination"></div>
</div>
</section>
▢jsファイル
const swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
<!-- ページネーションの設置-->
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
});
上記の記述をすると、ページネーションは下記のように設置できます。
See the Pen
ページネーション by wataru🐧 (@mimori_5046)
on CodePen.
スライドのスピードを設定する
スライドのスピードの設定は簡単です。下記のようにjsファイルに「 speed: 数値,」と記述すればスピードの設定ができます。
▢jsファイル
const swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
<!-- スライドのスピードの設定-->
speed: 100,
});
上記の記述をすると下記のようにスライドのスピードを変えられます。
See the Pen
スピード by wataru🐧 (@mimori_5046)
on CodePen.
ループに対応させる
これまで制作してきたスライドショーは、まだループに対応していません。ループに対応させれば、最後のスライド画面から最初のスライド画面に、最初のスライド画面から最後のスライド画面に移動できます。
下記のように「loop: true,」とjsファイルに記載するとループに対応させられます。
▢jsファイル
const swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
speed: 100,
<!-- ループに対応させる-->
loop: true,
});
上記の記述をすると、下記のようにスライドにループを設定できます。
See the Pen
ループ by wataru🐧 (@mimori_5046)
on CodePen.
スライドを自動で動くようにする
これまではボタンを押さないとスライドが動かない仕様でしたが、自動で動かせるような設定も可能です。下記のように「autoplay」とjsファイルに記載すると自動で動くようになります。
▢jsファイル
const swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
<!-- スライダーを自動で動かす-->
autoplay: {
delay: 2000,
},
speed: 100,
loop: true,
});
上記の記述をすると下記のようにスライダーが自動で動くようになります。また 「delay: (数値),」でスライドの速さを設定できます。
See the Pen
スライド 自動 by wataru🐧 (@mimori_5046)
on CodePen.
表示させるスライドの枚数とスライドの間隔の設定
これまでは表示されるスライドの枚数は一枚のみでした。表示される枚数も設定可能です。またスライドの間隔の設定についても紹介します。下記のようにjsファイルに「slidesPerView」「spaceBetween」で表示されるスライドの枚数と間隔の設定が可能です。
▢jsファイル
const swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
autoplay: {
delay: 2000,
},
speed: 100,
loop: true,
<!-- 表示するスライドの枚数-->
slidesPerView: 3,
<!-- スライドの間隔の幅-->
spaceBetween: 20,
});
上記の記述をすると、下記のように表示されるスライドの枚数と間隔を設定できます。今回は一画面に3枚、間隔の幅は20pxで設定しました。
See the Pen
スライド枚数 間隔 by wataru🐧 (@mimori_5046)
on CodePen.
真ん中にスライドを配置しつつ、左右に前後のスライドがちらっと見れるようにする
左右にちらっと前後のスライドを表示させるようにすると、閲覧者の興味を引かせられるでしょう。下記のようにjsファイルに「slidesPerView」を小数点で設定しつつ、「 centeredSlides: true,」と記述すれば実装できます。
▢jsファイル
const swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
autoplay: {
delay: 2000,
},
speed: 100,
loop: true,
<!-- 小数点で表示領域を設定する-->
slidesPerView: 1.5,
spaceBetween: 20,
<!-- 中央に配置する-->
centeredSlides: true,
});
上記の記述をすると、下記のように真ん中にスライドを配置しつつ、前後のスライドがちらっと見えるようになります。
See the Pen
センタリング by wataru🐧 (@mimori_5046)
on CodePen.
レスポンシブにも対応。幅によって表示する枚数を変更する
パソコンでの表示なら3枚、タブレット表示なら2枚というように幅によって枚数を変更できます。下記のようにjsファイルに「breakpoints」を記載すると、幅ごとのブレイクポイントが設定できます。
▢jsファイル
const swiper = new Swiper(".swiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
autoplay: {
delay: 2000,
},
speed: 100,
loop: true,
slidesPerView: 1,
centeredSlides: true,
<!-- 幅ごとのブレイクポイントを設定する-->
breakpoints: {
600: {
slidesPerView: 2,
spaceBetween: 20,
},
1120: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
ということでこれまでSwiperでのスライドショーの作成方法を解説してきました。ここで紹介した以外にも、様々なオプションがあるので、自分好みのスライドショーを作成してみてください。
GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。
