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

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

Contents

skippr.jsを使ってシンプルなスライドショーを表示するCSSの記述
skippr.jsを使ってシンプルなスライドショーを表示するHTMLの記述
skippr.jsを使ってシンプルなスライドショーを表示するJavaScriptの記述
skippr.jsを使ってシンプルなスライドショーを表示するデモページ
ソース元：Skippr. A jQuery plugin for creating tasteful slideshows.

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">

skippr.jsを使ってシンプルなスライドショーを表示する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>