JavaScript

skippr.jsを使ってシンプルなスライドショーを表示する方法

skippr.jsを使ってシンプルなスライドショーを表示する方法をご紹介します。

シンプルなスライドショーを表示するCSSの記述

※skippr.cssファイルを読み込みます。htmlとbodyタグのheightとwidhtに100%を指定します。その他、必要に応じて変更して下さい。

<style>
html, body {
  height: 100%;
  width: 100%;
}
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0 30px 0;
}
#container{
    width: 100%;
    height: 80%;
    min-height: 500px;
    position: relative;
}
</style>
<link rel="stylesheet" href="skippr.css">

シンプルなスライドショーを表示するHTMLの記述

※スライドショーエリア(id=”theTarget”)内にスライドショー用の画像(1 ~ 3.jpg)を用意します。

<h1>skippr.jsを使ってシンプルなスライドショーを表示</h1>

<div id="container">
<div id="theTarget">
  <div style="background-image: url(1.jpg)"></div>
  <div style="background-image: url(2.jpg)"></div>
  <div style="background-image: url(3.jpg)"></div>
</div>
</div>

skippr.jsを使ってシンプルなスライドショーを表示するJavaScriptの記述

※jquery-1.12.0.min.js、skippr.min.jsファイルを読み込みます。$(“スライドショーエリア”).skippr({オプション})を記述します。オプションでは自動スライドや速度等を設定できます。

<script src="jquery-1.12.0.min.js"></script>
<script src="skippr.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#theTarget").skippr({
      autoPlay : true,
      autoPlayDuration : 2000,
      logs : true
    });
  });
</script>

skippr.jsを使ってシンプルなスライドショーを表示するデモページ

skippr.jsを使ってシンプルなスライドショーを表示するデモページ

ソース元:Skippr. A jQuery plugin for creating tasteful slideshows.

Skippr. A jQuery plugin for creating tasteful slideshows.

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。