ホーム >  JavaScript >  jQueryでフレキシブルなスライドショーを作る


Posted:2015/02/03 9:00:59 AM|Category : JavaScript

jQueryでフレキシブルなスライドショーを作る

レスポンシブ・イメージなスライドショーを作ります。「ResponsiveSlides.js」というjQueryプラグインを利用します。このプラグインは、以下のような点で優れています。

  • 実装が簡単
  • カスタマイズが可能
  • スクリプトファイルが軽い
  • IE6でも動作する

完成イメージ

いすの画像が表示されます。

jQ0001

数秒でベンチの画像に切り替わります。

jQ0002

画面が小さくなると、スライドショーも画面サイズに合わせて縮みます。

jQ0003

ダウンロード

①以下のサイトを開きます。
→ ResponsiveSlides.js

②サイトの一番下にある「Download the latest version from GitHub」をクリックします。

③GitHubのページが開きますので、右下の「Download ZIP」をクリックしてダウンロードします。

ファイル配置

ダウンロードしたファイルを解凍します。
全てのファイルではありませんが、以下の①~⑥ファイルがあることを確認します。

  • responsiveslides.css
  • responsiveslides.min.js
  • demo/
  • themes/
  • themes.gif
  • images/
  • 1.jpg
  • 2.jpg
  • 3.jpg

ファイルをサイトのフォルダに配置します。
※サイトフォルダ名を「prototype」とします。

  • prototype/
  • index.html
  • css/
  • main.css
  • responsiveslides.css
  • img/
  • 1.jpg
  • 2.jpg
  • 3.jpg
  • themes.gif
  • js/
  • responsiveslides.min.js

コード

index.html

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsiveslides.css">
    </head>
    <body id="coffee">
        <!-- メインコンテンツ -->
        <div id="main">
            <div class="row">
                <div class="eight cols box-slide">
                    <ul class="rslides" id="slider1">
                        <li>
                            <a href="#"><img src="img/2.jpg" alt="" /></a>
                            <p class="caption">このスライドにはリンクがついています (Photo by <a href="#" target="_blank">umers30</a>)</p>
                        </li>
                        <li>
                            <img src="img/1.jpg" alt="" />
                            <p class="caption">キャプションも入れられます (Photo by <a href="#" target="_blank">CIDSE</a>)</p>
                        </li>
                        <li>
                            <img src="img/3.jpg" alt="" />
                            <p class="caption">Photo by <a href="#" target="_blank">waferboard</a></p>
                        </li>
                    </ul>
                </div>
                <div class="four cols">
                    <div class="slide-aside">
                        <p>プロモコンテンツ1</p>
                        <p>プロモコンテンツ2</p>
                        <p>プロモコンテンツ3</p>
                    </div>
                </div>
            </div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
        <script src="js/vendor/responsiveslides.min.js"></script>
        <script>
            $(function () {
              // Slideshow 1
              $("#slider1").responsiveSlides({
                speed: 1600,
                nav: true,
                auto: true,
                namespace: "top-slide"
              });
            });
        </script>
    </body>
</html>

main.css

/* ボックスモデルの指定 */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    font-size: 1em;
    line-height: 1.4;
    background: #fff;
}

img {
    vertical-align: middle;
}

#main {
  background: #fff;
  padding-bottom: 2em;
}

/* ----------
   フレキシブル・メディア
   ---------- */
img {
  width: 100%;
  max-width: 100%;
}

.row {
  width: 1140px;
  max-width: 100%;
  min-width: 768px;
  margin: 0 auto;
  overflow: hidden;
}

.row .row {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 -10px;
}

.cols {
  min-height: 1px;
  padding: 0 10px;
  float: left;
  position: relative;
}

.row .eight { width: 66.66%; }
.row .four { width: 33.33%; }

@media screen and (max-width:49.25em){
/* 788px以下向けのモバイル版グリッド・スタイル */
  .cols {
    width: auto !important;
    height: 100%;
    float: none;
  }
  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
  [class*="cols"] + [class*="cols"]:last-child { float: none; }
  [class*="cols"] + [class*="cols"].end { float: none; }
}

@media screen and (max-width:25em){
/* 400px以下で強制的に1カラムにするクラス */
  .row .cols.force-one {
    float: none;
    width: auto !important;
    height: 100%;
  }
}

responsiveslides.css

/*! http://responsiveslides.com v1.54 by @viljamis */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }


/* ================================================================
   カスタム・スタイル
   ================================================================ */

.box-slide {
  margin: 1em 0;
}

.top-slide img {
  position: relative;
  z-index: 1;
}

/* キャプションのスタイル */
#main .top-slide .caption {
  display: block;
  margin: 0;
  padding: 0.8em;
  max-width: none;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  background: rgba(0,0,0, .8);
  font-size: 1em;
  color: #fff;
}
.top-slide .caption a {
  text-decoration: none;
  color: #fff;
}

/* ----------
   前後ナビのスタイル
   ---------- */
.top-slide_nav {
  position: absolute;
  top: 52%;
  left: 10px;
  height: 61px;
  width: 38px;
  background: transparent url("../img/themes.gif") no-repeat left top;
  margin-top: -45px;
  z-index: 3;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
}
.top-slide_nav:active {
  opacity: 1.0;
}
.top-slide_nav.next {
  left: auto;
  background-position: right top;
  right: 10px;
}

/* スライド横プロモコンテンツ */
.slide-aside {
  padding: 1em;
}
#main .slide-aside p {
  margin: 1em 0;
  padding: 1.2em 1em;
  background: #ddd;
}

/* ----------
   スライド用メディアクエリ
   ---------- */
@media screen and (max-width:48em){
  /* スライド横プロモコンテンツのスタイル */
  .slide-aside { padding: 0; }

  #main .slide-aside p {
    margin: 0 0 1em;
    width: 33.3333%;
    border-left: 0.5em solid #fff;
    border-right: 0.5em solid #fff;
    float: left;
  }
}

@media screen and (max-width:38em){
  /* スライド横プロモコンテンツのスタイル */
  #main .slide-aside p {
    width: 50%;
  }
}

@media screen and (max-width:34em){
  /* スライド横プロモコンテンツのスタイル */
  #main .slide-aside p {
    width: 100%;
    float: none;
  }

  /* キャプションのスタイルの調整 */
  #main .top-slide .caption {
    position: relative;
    padding: 0.6em;
    font-size: 0.8em;
    background: rgba(0,0,0, 1);
  }
  .rslides img { float: none; }
  
  /* 小さい画面でのナビゲーションの非表示 */
  .top-slide_nav { display: none; }
}

解説

index.html

                <div class="eight cols box-slide">
                    <ul class="rslides" id="slider1">
                        <li>
                            <a href="#"><img src="img/2.jpg" alt="" /></a>
                            <p class="caption">このスライドにはリンクがついています (Photo by <a href="#" target="_blank">umers30</a>)</p>
                        </li>
                        <li>
                            <img src="img/1.jpg" alt="" />
                            <p class="caption">キャプションも入れられます (Photo by <a href="#" target="_blank">CIDSE</a>)</p>
                        </li>
                        <li>
                            <img src="img/3.jpg" alt="" />
                            <p class="caption">Photo by <a href="#" target="_blank">waferboard</a></p>
                        </li>
                    </ul>
                </div>

スライドショー部分です。<ul class="rslides" id="slider1">からがスライドショーです。

<p class="caption">このスライドにはリンクがついています (Photo by <a href="#" target="_blank">umers30</a>)</p>

画像(スライドショー)の下のキャプションです。

                <div class="four cols">
                    <div class="slide-aside">
                        <p>プロモコンテンツ1</p>
                        <p>プロモコンテンツ2</p>
                        <p>プロモコンテンツ3</p>
                    </div>
                </div>

画像(スライドショー)の横にあるプロモーションコンテンツです。画面が小さくなると、スライドショーの下にプロモーションコンテンツが配置されます。

        <script src="js/vendor/responsiveslides.min.js"></script>
        <script>
            $(function () {
              // Slideshow 1
              $("#slider1").responsiveSlides({
                speed: 1600,
                nav: true,
                auto: true,
                namespace: "top-slide"
              });
            });
        </script>

スライドショーのJavaScriptです。レンダリングを遅くさせないため、</body>の直前に記述します。オプションは以下の通りです。

・speed
スライドが切り替わる秒数(ミリ秒)。

・nav
前・次のナビゲーションの表示有無。

・auto
スライドの自動再生。

・namespace
HTMLが生成された際に使われるクラス名。スライドに自動で付与されるクラス名を任意のものへ変更します。ナビゲーションをオンにした場合、ナビゲーション部分のHTMLにクラス名「top-slide_nav」が追加されます。

※追加されるクラス名は、namespace + _navとなります。

main.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
 

widthで指定した幅が、paddingとborderの幅に関係なく保持されます。

※詳細につきましては、以下のページを参照して下さい。
グリッド・システムの基本コード

img {
  width: 100%;
  max-width: 100%;
}

スライドショーの画像をフレキシブル・イメージにします。

.row {
  width: 1140px;
  max-width: 100%;
  min-width: 768px;
  margin: 0 auto;
  overflow: hidden;
}
 
.row .row {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 -10px;
}
 
.cols {
  min-height: 1px;
  padding: 0 10px;
  float: left;
  position: relative;
}
 
.row .eight { width: 66.66%; }
.row .four { width: 33.33%; }

@media screen and (max-width:49.25em){
/* 788px以下向けのモバイル版グリッド・スタイル */
  .cols {
    width: auto !important;
    height: 100%;
    float: none;
  }
  .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
  [class*="cols"] + [class*="cols"]:last-child { float: none; }
  [class*="cols"] + [class*="cols"].end { float: none; }
}
 
@media screen and (max-width:25em){
/* 400px以下で強制的に1カラムにするクラス */
  .row .cols.force-one {
    float: none;
    width: auto !important;
    height: 100%;
  }
}
 

スライドショーと、その右側のプロモーションコンテンツをグリッドシステムにします。また、画面が小さい場合はメディアクエリによりスライドショーとプロモーションコンテンツを縦一列にします。

※詳細につきましては、以下のページを参照して下さい。
グリッド・システムの基本コード

responsiveslides.css

/* ----------
   前後ナビのスタイル
   ---------- */
.top-slide_nav {
  position: absolute;
  top: 52%;
  left: 10px;
  height: 61px;
  width: 38px;
  background: transparent url("../img/themes.gif") no-repeat left top;
  margin-top: -45px;
  z-index: 3;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
}

htmlが生成されたあとに、<ul class="rslides" id="slider1">以下に「top-slide_nav」が追加されます。
「top-slide_nav」クラスは、スライドショーのナビゲーションです。
「top-slide_nav」のスタイルを指定します。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告