かっこよく見せたい！jQueryでスライドショーを設置する方法【初心者向け】
プログラミング初心者向けに、jQueryでスライドショーを設置する方法について解説しています。jQueryを使えばおしゃれでかっこいいスライドショーを手軽に入れられるので、初心者の方でも簡単に設置できるでしょう。ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでスライドショーを設置する方法を紹介します。
コーポレートサイトやECサイトなどのトップに、取り扱っている商品画像を順番に表示させるようなスライドショーをよく見ますが、ひとつのスペースでいろいろな画像を表示することができます。
jQueryを使えば簡単に設置できるので、ぜひ覚えておきましょう。
目次
スライドショーって、クリックすると次の画像が表示されるようなパーツのことですか？
そうそう。JavaScriptで作られてるんだよね。
法人サイトにスライドショーがあると、ビシッと決まりますね。
そうだね。今回はライブラリを使用してスライドショーを作成してみよう！
スライドショーを実装できるライブラリ
スライドショーを実装できるライブラリとして代表的なものは以下です。
- slick
- Felickity
- Owl Carousel 2
- Siema
- Glide
- jQuery Brazzers Carousel Plugin
それぞれ詳しく解説していきます。
slick.js
slickは設置がとても簡単で、数あるスライダー系JSプラグインのなかでも、もっとも有名なライブラリのひとつと言っていいでしょう。
豊富なオプション設定が用意されているので、さまざまなケースに対応ができます。
ブレークポイントの設定もオプションで行えるため、JavaScriptのみで、簡単にモバイルの最適化が可能です。
コーポレートサイトやプロダクトサイトなど、多くのWebサイトで使用されています。
Flickity
Flickityは、フリックの動作がとても魅力的なスライダー系JSプラグインです。
いつまでもスクロールしていたくなるような、スムーズな動きや反応が特徴的です。
CSSで見た目の細かい調整ができるので、jQueryやJavaScriptに慣れていないWebデザイナーの方でも気軽に試せます。
公式サイトのドキュメントが非常に丁寧なことでも有名です。
シンプルでポップな造りとなっているので、興味のある方はぜひ一度、公式サイトを覗いてみるといいでしょう。
レスポンシブやタッチデバイスに対応しており、無限スクロールなどもオブション設定で簡単に実装ができます。
Owl Carousel 2
Owl Carousel 2は、レスポンシブに対応したカルーセルスライダーが作成できる軽量プラグインです。
前作のOwl Carouselのアップグレード版となり、カスタマイズ性の高いオプションが豊富に用意されています。
フルレスポンシブ、マウスホイールやドラッグ、スワイプでのスライド動作が可能で、モバイルフレンドリーに対応しています。
歴史の長いプラグインのため、古いブラウザ（IE7以降）にも対応しているのが魅力的ですが、その分、旧バージョンの解説記事もヒットしていますので、公式ドキュメントを参考にするのがおすすめです。
Siema
Owl Carousel 2に次いでの超軽量プラグイン、Siema。
jQueryに依存していないので、単体で使用できるのがうれしいところです。
Siemaの魅力はなんといっても超軽量＆お手軽に実装できるという点。
機能も必要最低限なオプションにのみ絞られているので、JavaScriptの悩みのひとつでもある「サイトの読み込みが遅くなった…」という心配をせずに済みます。
とてもシンプルに実装が可能なため、「初めてJavaScriptを使用する」という初心者の方にピッタリのプラグインです。
無限ループやクロスブラウザにも対応しています。
Glide
非常に軽量化されたコンパクトなスライダー系JSプラグインのGlide。
JavaScript ES6で実装されており、他のスクリプトに依存性がありません。
総容量はなんと23kb（gzip: 7kb)というミニサイズでありながら、BEMに基づいたSASSが搭載されており、超高速のCSS3遷移でスライダーが楽しめます。
レスポンシブやタッチデバイス、ブレークポイントの設定など、モバイル端末に最適化された機能も多数搭載されています。
slick.jsに次いで、非常に機能性の高い優良ライブラリです。
jQuery Brazzers Carousel Plugin
jQuery Brazzers Carousel Pluginは、3Dホバーカルーセルを実装できる、非常にレアなjQueryプラグインです。
他にはない独特なレイアウトを実装できるため、「Webサイトにユニークなデザインを取り入れたい！」というWebデザイナーには必見です。
画像内を左右にホバーしながら切り替えが可能で、下部にあるナビゲーションバーとスライダーの枚数が連動して移動します。
とてもおしゃれな動作になるので、気になる方は公式サイトのデモをご覧ください。
軽量かつレスポンシブ対応、またnpmインストールにも対応しているので、エンジニアも気軽に試すことができます。
実際に設置してみよう
今回はslickで実際にソースコードを書いてみましょう。
slick用のHTMLの読み込みは以下の4つとなります。
<link rel="stylesheet" href="slick-theme.css" type="text/css"> <link rel="stylesheet" href="slick.css" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="slick.js" type="text/javascript"></script>
jQueryの読み込みを忘れずに行いましょう。
また、環境に合わせてルートパスを変更しましょう。
ルートパスについてはパスの種類を現役エンジニアが解説の記事が参考になります。
以下はHTML、CSS、JavaScriptのコード例です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="slick-theme.css" type="text/css">
<link rel="stylesheet" href="slick.css" type="text/css">
<link rel="stylesheet" href="sample.css" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="slick.js" type="text/javascript"></script>
<script src="sample.js" type="text/javascript"></script>
<title>jQuery</title>
</head>
<body>
<div class='container'>
<div class='single-item'>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</div>
</div>
</body>
</html>
CSS
.container {
margin: 0 auto;
padding: 40px;
width: 80%;
color: #333;
background: #419be0;
}
.slick-slide {
text-align: center;
color: #419be0;
background: white;
}
JavaScript
$(function(){
$('.single-item').slick({
accessibility: true,
autoplay: true,
autoplaySpeed: 1000,
dots: true,
fade: true,
});
});
JavaScript内部では、オプション設定をしています。
- 「accessibility」：左右ボタンの画像の切り替え設定
- 「autoplay」：自動再生設定
- 「autoplaySpeed」：自動再生で切り替えをする時間
- 「dots」：ページ送りのドット表示
- 「fade」：フェードの有無
上記以外にも多くのオプションがあり、オリジナル性を出せるので、自分が探し求めるスライドショーを簡単に実装できることでしょう。
とても使いやすいので、ぜひ採用してみてください。
いいですね。でも、スライドショーってライブラリが必要なんですか？
ライブラリがなくても作れることは作れるんだよね。imgタグのsrc属性を変えればいいだけなので。
ライブラリを使うのは、動きやデザインの問題ですか？
その通り！アニメーションのように動いたりするにはjQueryを使ったほうがいいし、デザインも良いものにするためにはライブラリに頼ったほうがいいんだ。
執筆してくれたメンター
| Mak Tak
イラストレーター兼Webエンジニア。 4年間Web制作会社にてフロントエンドを担当したのち、現在はフリーランスとして活動。 アニメーションを駆使したPOPなWebデザインが得意。 居場所に縛られない働きかたを謳歌しています。 |
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
