CoolWebWindow

自作したjQueryプラグインを無料配布しているサイトです。
jQueryプラグインは商用利用可能、MITライセンス表示、カスタマイズ無制限です。

無料jQueryプラグイン [スライドショー(画像)]

スライドショー(画像バージョン)

単体バージョン:jquery.slideshow.js

スマートフォンで閲覧した場合は、スワイプで画像を変更できるようにしています。

2015/06/08
スライドの画像を背景画像に変換することもできるようになりました。また、スマートフォンで閲覧した際、スワイプの有無を選べるようにしました。

2015/04/21
ホバー時の動作をスマートフォンで読み込まないようにして対処しました。
既知の不具合があって、スマートフォンで閲覧した場合、画像下のナビゲーションをクリックした際、オートスライド機能をONにしてても、オートスライドをしなくなってしまいます。(スマートフォン用に使っている『touchstart』が後から追加した要素に対応してくれて無くて…。)

オプションで、

  • スワイプ機能(touch)
  • スワイプの感度(touchDistance)
  • オートスライド機能(autoSlide)
  • フェード/横スライド表示の選択(effect:fade/slide)
  • 繰り返しのあり/なし(repeat)
  • スライドする効果の種類の変更(easing:liner/swing)
  • 1枚あたりの表示時間の変更(interval)
  • 切り替わるスピードの変更(duration)
  • 画像にマウスオーバーしたときにオートスライド一時停止(imgHoverStop)
  • ナビゲーションにマウスオーバーしたときにオートスライド一時停止(navHoverStop)
  • ナビゲーションにサムネイル画像を使用(navImg)
  • ナビゲーションに別途用意したサムネイル画像を使用(navImgCustom)
  • ナビゲーションのサムネイル画像の接尾辞名を指定(navImgSuffix)
  • PREV/NEXTナビゲーションの表示/非表示(HTMLファイルに記述)
  • ページネーションの表示/非表示(HTMLファイルに記述)

が選べます。

touchスマートフォンやタブレットなどのタッチパネル式のデバイスで閲覧した際、スワイプの有無を選べます。「true」でスワイプあり、「false」でスワイプなしです。
初期値は「true」です。
touchDistanceスワイプでスライドさせるときの感度を指の移動距離により調整します。単位はpxですが、単位まで記述する必要はありません。
初期値は「'80'」です。
bgImage画像を背景画像(background-image)に変更できます。「true」で背景画像に変更、「false」でimg画像のままです。
初期値は「false」です。
autoSlideスライドショーを自動にするかどうかを選べます。「true」で自動、「false」で自動では動かないようにできます。
初期値は「true」です。
effectスライドする効果の種類です。「'fade'」でフェードイン、「'slide'」で横スライドします。
初期値は「'fade'」です。
repeatスライドショーの繰り返しのありなしを選べます。「true」はカルーセルタイプで画像が最後まで表示されると最初に戻り、ループします。「false」は最後の画像が表示されるとそこでストップします。
autoSlideの値がtrueで、repeatの値がfalseの場合、最後の画像が表示されない限りは常にautoSlideが有効になっています。最後の画像が表示されると、戻る方向に画像を表示しても、autoSlideが無効になります。
初期値は「true」です。
easingスライドする効果の種類(移動パターン)を選べます。移動パターンについては、「'linear'」と「'swing'」からお選びください。また、jQuery Easing Pluginを利用することにより、さらに多くの移動パターンを選択できるようになります。初期値は「'linear'」です。
interval次のスライドまでの止まっている時間です。単位はミリ秒ですが、単位まで記述する必要はありません。
初期値は「3000」です。
durationスライドするスピードです。単位はミリ秒ですが、単位まで記述する必要はありません。
初期値は「500」です。
imgHoverStop画像にホバーした際、スライドをストップするかを選べます。「true」でスライドをストップ、「false」でスライドをストップしないようにできます。
初期値は「true」です。
navImgナビゲーションに画像を使用するかを選べます。「true」で画像使用、「false」で画像を使用しないようにできます。
初期値は「false」です。
navImgCustomナビゲーションに画像を使用する場合、別途用意したナビゲーション用のサムネイル画像を使用するかを選べます。「true」でサムネイル画像を使用する、「false」でサムネイル画像を使用しないようにできます。
初期値は「false」です。
navImgSuffixナビゲーション用のサムネイル画像を別途用意している場合、接尾辞名を選べます。サムネイル画像には、スライド画像名に適当な接尾辞を付けてください。例えば、スライド画像が「photo-1.jpg」という名前だった場合、そのサムネイル画像は、「photo-1_thumbnail.jpg」というように適当な接尾辞をつけてください。この場合、「'_thumbnail'」としてください。

基本的に、PREVボタンには『.slidePrev』、NEXTボタンには『.slideNext』、ページネーションには『.controlNav』というクラス名を付けてください。他のクラス名にしたい場合は、JSファイルのほうも変更してください。

画像にカーソルを合わせている時はスライドしないようにしています。これは、画像にリンクを貼ることができるので、クリックしている時にスライドしてしまい、意図しないリンク先に飛ばないようにするためです。

このスクリプトはスライドショーなので、基本的には複数の画像を設定いただくことになるのですが、画像が1枚しかないときにスクリプトが不具合を起こさないように、ナビゲーションが非表示になるように設定しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="css/style.css" media="all">
 <script src="js/jquery.js"></script>
 <script src="js/jquery.slideshow.js"></script>
 <script>
 $(function($) {
      $('.slide').slideshow({
            touch        : true,
            bgImage      : false,
            autoSlide    : true,
            effect       : 'slide',
            repeat       : true,
            easing       : 'swing',
            interval     : 3000,
            duration     : 500,
            imgHoverStop : true,
            navHoverStop : true,
            navImg       : false,
            navImgCustom : false,
            navImgSuffix : ''
      });
 });
 </script>
</head>
<body>
     <div class="slide">
          <ul class="slideInner">
                <li><img src="images/photo01.jpg" alt="" width="940" height="300" /></li>
                <li><img src="images/photo02.jpg" alt="" width="940" height="300" /></li>
                <li><img src="images/photo03.jpg" alt="" width="940" height="300" /></li>
          </ul>
          <div class="slidePrev"><img src="images/nav_prev.png" alt="前へ"></div>
          <div class="slideNext"><img src="images/nav_next.png" alt="次へ"></div>
          <div class="controlNav"></div>
     </div><!-- /.slide -->
</body>
</html>

CSS

.slideWrap {
    width:940px;
    margin:0 auto;
}

.slide {
    width:100%;
    overflow:hidden;
    position:relative;
}

.slideInner {
    list-style:none;
    margin:0;
    padding:0;
}
.slideInner li {
    position:absolute;
    width:100%;
    background:#fff;
    margin:0;
    padding:0;
}
.slideInner li img {
    width:100%;
}

.slidePrev {
    position:absolute;
    width:50px;
    height:60px;
    left:0;
    cursor:pointer;
    z-index:100;
}

.slideNext {
    position:absolute;
    display:block;
    width:50px;
    height:60px;
    right:0;
    cursor:pointer;
    z-index:100;
}

.controlNav {
    position:relative;
    float:left;
    left:50%;
    bottom:0;
}
.controlNav span {
    position:relative;
    left:-50%;
    overflow:hidden;
    float:left;
    width:50px;
    height:50px;
    margin:5px;
    vertical-align:middle;
    border:2px solid #fff;
}

.controlNav span img {
    width:100%;
    height:100%;
}
.controlNav span:hover {
    border:2px solid #999;
    cursor:pointer;
}
.controlNav span.current {
    border:2px solid #333;
}

@media screen and (max-width:767px) {
    .slideWrap {
        width:100%;
    }
}

CSSは6~25行目までが必須の設定です。ナビゲーションやページネーションは、デザインや配置箇所によってCSSを変更してください。

フッター部分のナビゲーション(ページネーション)は、スタイルを指定しない場合は、「1」「2」「3」…というように番号で表示されます。ボタンタイプにするにはCSSで変更できます。画像のボタンもCSSで設定できます。

更新履歴

2016-02-21
ver2.5公開 ブラウザをリサイズした際の不具合を修正しました。
2015-12-28
ver2.4公開 一部ソースコードを修正しました。
2015-09-01
ver2.3公開 ナビゲーションの不具合修正しました。
2015-08-14
ver2.2公開 ナビゲーションの画像化に対応しました。
2015-08-10
ver2.1公開
2015-07-17
ver2.0公開
2015-06-08
ver1.4公開
2015-04-22
ver1.3公開
2015-04-21
ver1.2公開
2015-03-08
ver1.0公開
ページのトップへ戻る