skippr.jsで簡単！美しいスライドショーの作り方完全ガイド｜DAD UNION

今回は「skippr.js」を使ったスライドショーの実装方法をご紹介します。この記事では、初心者でも簡単にできるステップバイステップのガイドを提供します。さあ、あなたのウェブサイトを次のレベルへと引き上げましょう！

Contents

CSSを設定して基盤を整える
HTMLでスライドショーの構造を作る
skippr.jsを使ってJavaScriptで動きを加える
skippr.jsを使ってシンプルなスライドショーを表示するデモページ
ソース元：Skippr. A jQuery plugin for creating tasteful slideshows.
まとめ

CSSを設定して基盤を整える

まずは基本となるCSSを設定しましょう。
skippr.cssを読み込んで、htmlとbodyに全画面をカバーするスタイルを適用します。htmlとbodyタグのheightとwidhtに100%を指定します。
ここではフォントサイズやテキストの配置も調整します。以下に基本のCSS設定例を示します。

<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でスライドショーの構造を作る

次に、スライドショーの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で動きを加える

見た目が整ったら、JavaScriptを使ってスライドショーに動きを加えましょう。ここではjQueryとskippr.jsを利用します。
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>