かっこよく見せたい！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デザインが得意。 居場所に縛られない働きかたを謳歌しています。 |
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
