シンプルなスライドショーを簡単に実現できるjQueryプラグイン「jquery.SimpleSlideShow.js」

複数枚の画像をフェードイン、フェードアウトしながら繰り返し再生するjQueryプラグイン「jquery.SimpleSlideShow.js」です。Nivo Sliderとか高機能でスゴいプラグインもありますが、簡易なものを実装したいときには設定が複雑だったりCSSの調整が面倒だったり…ということで簡易なものがほしいなぁと。

デモ





使い方

下記のような感じでjQueryとjquery.SimpleSlideShow.jsとCSSを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.simpleSlideShow/jquery.simpleSlideShow.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery.simpleSlideShow/jquery.simpleSlideShow.css" />

そして、下記で実行。

JavaScript

$(function() {
  $('.simpleSlideShow').SimpleSlideShow({
    'height' : 600, // ステージの高さ。デフォルトでは1枚目の画像の高さ。
    'width'  : 300, // ステージの横幅。デフォルトでは1枚目の画像の横幅。
    'duration' : 1000, // アニメーションにかかる時間。
    'interval' : 3000  // 次のアニメーションまでのインターバル。
  });
});

HTML

<div class="simpleSlideShow">
  <a href="http://google.com"><img src="/images/img1.jpg" alt="" /></a>
  <img src="/images/img2.jpg" alt="" />
  <img src="/images/img3.jpg" alt="" />
<!-- end .simpleSlideShow --></div>

デフォルトのCSSは.simpleSlideShowで関数が実行されることを想定して設定されています。
画像群は自動的にdiv.simpleSlideShowWrapperで囲まれるので、構文を気にする方はご注意ください。また、デフォルトのCSSの指定でdiv.simpleSlideShowWrapperは中央揃えされます。また、サイズは1枚目の画像のサイズ(引数で設定した場合はそのサイズ)に設定されますので、そちらもご注意を。

ダウンロード

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく