SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【jQuery】スライドショーするjQueryプラグイン

作りました。

ssslideshow

名前

ssSlideShow … SlideShowだからss。深い意味はありません。

バージョン

Version: 0.1 … 出来立てです。

ライセンス

自由に使って、改造して、何かあればフィードバックいただければと思います。
表示するなら、パブリックドメインでよいでしょうか。

特徴

注意

デモ

ssSlideShow – デモ

ダウンロード

https://github.com/softelcojp/ssslideshow/archive/master.zip

使い方

ダウンロードしたssslideshow.jsを、外部jsとして読み込みます。
既存のjsファイルにコピー&ペーストして追加しても大丈夫です。

HTMLに、スライドショーさせたい要素の一覧を書きます。

<div id="slides">
  <div><img src="./images/1.jpg" alt=""></div>
  <div><img src="./images/2.jpg" alt=""></div>
  <div style="width:640px; height:480px;background:#999999;">
    <div style="padding:10px;">
      <h2>画像だけではありません</h2>
      <p>
        画像のスライドショーの他、<br>
        文字や通常のHTML(div要素)もスライドショーできます。
      </p>
      <p style="float:right;"><img src="./images/3.jpg" alt=""></p>
    </div>
  </div>
  <div><img src="./images/4.jpg" alt=""></div>
  <div><img src="./images/5.jpg" alt=""></div>
</div>

スライドショーさせます。
スライド1枚の幅、高さと、スライドショーの時間間隔はオプションで指定できます。

<script>
$(function(){
    $("#slides").ssSlideShow({w:640, h:480, d:6000});
});
</script>

以上です。

メモ

要素が少ないときは、事前に2,3倍にして並べておくとよい。4個だったら8個にするなど。
プラグイン側で対応させてもよいし、使う側がそのようにひと手間かけるのもよい。

関連するメモ

コメント(5)

sigesit 2014年2月28日 17:34

鎌倉新書のホームページで使用されているのを見てたどり着きました。
探していたイメージ通りのjQueryでとても助かります。

jiro 2014年7月26日 14:54

まさにこういうのを探してました。デモでは画像が3枚ですが、5枚(それぞれw200、h150px程度)並べたものを作りたいと思い、素人ながらいろいろ(勝手に)試してみました。ところが、半透明の左右矢印画面がどうしても左右端(左から1枚目と5枚目)に表示できず、5枚並べたうちの左から2枚目と4枚目から動かせません。良いアドバイスをいただけませんでしょうか。

yoshimura 2014年7月28日 23:52

JavaScriptの以下の箇所を変えれば位置が変わると思います。

e5.css(“top”, (o.h – e5.height()) / 2).css(“left”, o.w + 50);
e6.css(“top”, (o.h – e6.height()) / 2).css(“left”, (e6.width() + 50) * (-1));

katayama 2016年4月22日 12:12

お世話になります。
とても素敵なスライダーなので、頑張ってWPに設置しました。
PCではデモと同じようになりましたが、スマホではレスポンシブに表示されません。
どのように直したらよろしいでしょうか?
お忙しいところよろしくお願いいたします。

yoshimura 2016年4月26日 17:42

レスポンシブデザインを想定していなかったスライダーなので、レスポンシブに対応するには直すところが多そうな気がします。