かっこよく見せたい!jQueryでスライドショーを設置する方法【初心者向け】

プログラミング初心者向けに、jQueryでスライドショーを設置する方法について解説しています。jQueryを使えばおしゃれでかっこいいスライドショーを手軽に入れられるので、初心者の方でも簡単に設置できるでしょう。ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryでスライドショーを設置する方法を紹介します。

コーポレートサイトやECサイトなどのトップにスライドショーをよく見ますが、一つのスペースでいろいろな画像を表示することができます。jQueryを使えば簡単に設置できるので、ぜひ覚えておきましょう。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

 

大石ゆかり

スライドショーって、クリックすると次の画像が表示されるようなパーツのことですか?

田島悠介

そうそう。JavaScriptで作られてるんだよね。

大石ゆかり

法人サイトにスライドショーがあると、ビシッと決まりますね。

田島悠介

そうだね。今回はライブラリを使用してスライドショーを作成してみよう!

 

スライドショーを実装できるライブラリ

スライドショーを実装できるライブラリは多くありますが、その中でも今回は使いやすいライブラリである「slick.js」を紹介します。

slick.js

このライブラリをおすすめする理由は、何といっても実装の簡単なところにあります。それでいて、拡張機能も豊富です。

上記に述べたとおりに、スライドショーを実装できるライブラリは多くの種類があるので、自分の使いやすいものを選んでみてもいいかもしれません。

今回は実際の設置をしませんが、他にも以下のものがあります。

bxSlider

FlexSlider2

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に設置してみよう

実際にソースコードを書いてみましょう。

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,
  });
});

HTMLの読み込みは2つ「slick.js」、「slick.css」を読み込みましょう。

デフォルト設定で使う場合は追加で「slick-theme.css」を読み込んでください。

JavaScript内部では、オプション設定をしています。

「accessibility」:自動再生
「autoplay」:自動再生
「dots」:ページ送りのドット表示
「fade」:フェードの有無

上記以外にも多くのオプションがあり、オリジナル性を出すことができ、自分が探し求めるスライドショーを簡単に実装できることでしょう。

とても使いやすいので、ぜひ採用してみてください。

 

大石ゆかり

いいですね。でも、スライドショーってライブラリが必要なんですか?

田島悠介

ライブラリがなくても作れることは作れるんだよね。imgタグのsrc属性を変えればいいだけなので。

大石ゆかり

ライブラリを使うのは、動きやデザインの問題ですか?

田島悠介

その通り!アニメーションのように動いたりするにはjQueryを使ったほうがいいし、デザインも良いものにするためにはライブラリに頼ったほうがいいんだ。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。