CoolWebWindow

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

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

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

スマートフォンに対応した、複数枚の画像を横並びしたフルワイドタイプのスライドショーです。

スマートフォンで閲覧した場合は、スワイプで画像を変更できるようにしています。また、左右のナビゲーションを無くし、どのような条件で設定しても画像が1枚しか表示されないようにしています。

オプションで、

  • スワイプ機能(touch)
  • スワイプの感度(touchDistance)
  • オートスライド機能(autoSlide)
  • 繰り返しのあり/なし(repeat)
  • スライドする効果の種類の変更(easing:liner/swing)
  • 1枚あたりの表示時間の変更(interval)
  • 切り替わるスピードの変更(duration)
  • 画像にマウスオーバーしたときにオートスライド一時停止(imgHoverStop)
  • ナビゲーションにマウスオーバーしたときにオートスライド一時停止(navHoverStop)
  • 左右のフィルターの表示/非表示(filter)
  • 左右のフィルター部分もナビゲーションにする(クリックしたらスライドする)(filterNav)
  • 表示するスライド数の変更(viewSlide)
  • 画像を1枚だけ表示するように切り替える際のブラウザのサイズ(baseWidth)
  • ナビゲーションにサムネイル画像を使用(navImg)
  • ナビゲーションに別途用意したサムネイル画像を使用(navImgCustom)
  • ナビゲーションのサムネイル画像の接尾辞名を指定(navImgSuffix)
  • PREV/NEXTナビゲーションの表示/非表示(HTMLファイルに記述)
  • ページネーションの表示/非表示(HTMLファイルに記述)

が選べます。

touchスマートフォンやタブレットなどのタッチパネル式のデバイスで閲覧した際、スワイプの有無を選べます。「true」でスワイプあり、「false」でスワイプなしです。
初期値は「true」です。
touchDistanceスワイプでスライドさせるときの感度を指の移動距離により調整します。単位はpxですが、単位まで記述する必要はありません。
初期値は「'80'」です。
autoSlideスライドショーを自動にするかどうかを選べます。「true」で自動、「false」で自動では動かないようにできます。
初期値は「true」です。
repeatスライドショーのタイプを選べます。「true」でカルーセルタイプで画像が最後まで表示されると最初に戻り、ループします。「false」で最後の画像が表示されるとそこでストップします。
autoSlideの値がtrueで、repeatの値がfalseの場合、最後の画像が表示されない限りは常にautoSlideが有効になっています。最後の画像が表示されると、戻る方向に画像を表示しても、autoSlideが無効になります。
初期値は「true」です。
interval次のスライドまでの止まっている時間です。単位はミリ秒ですが、単位まで記述する必要はありません。
初期値は「3000」です。
durationスライドするスピードです。単位はミリ秒ですが、単位まで記述する必要はありません。
初期値は「500」です。
easingスライドする効果の種類です。「liner」と「swing」から選べます。シングルクォーテーションかダブルクォーテーションで文字列を括る必要があるので注意です。
初期値は「'swing'」です。
imgHoverStop画像にホバーした際、スライドをストップするかを選べます。「true」でスライドをストップ、「false」でスライドをストップしないようにできます。
初期値は「true」です。
navHoverStop画像下のページネーションにホバーした際、スライドをストップするかを選べます。「true」でスライドをストップ、「false」でスライドをストップしないようにできます。
初期値は「true」です。
prevPosition左方向(戻る)スライドボタンの位置を指定します。プラスの値を指定すると右方向、マイナスの値を指定すると左方向に移動します。
初期値は「0」です。
nextPosition右方向(進む)スライドボタンの位置を指定します。プラスの値を指定すると左方向、マイナスの値を指定すると右方向に移動します。
初期値は「0」です。
fliter左右のフィルター部分を表示するかどうかを選べます。「true」で表示、「false」で非表示です。
初期値は「true」です。
fliterNav左右のフィルター部分をクリックするとスライドするかどうかを選べます。「true」でスライドさせる、「false」でスライドさせないようにします。
初期値は「true」です。
viewSlideアクティブ状態の(真ん中に表示される)スライド数を選べます。これにより比較的小さい画像を一度に複数並べるレイアウトにも対応しています。
初期値は「1」です。
baseWidthスライドショーの横幅を指定します。ブラウザの横幅がbaseWidthで指定した横幅より小さくなった場合は、スライドショーの見た目が少し変わるようになります。真ん中のスライドしか表示されなくなり、左右のナビゲーションメニューは見えなくなります。
特に指定する必要はありませんが、何も指定しない場合、自動的にスライドショーの横幅の値になります。
navImgナビゲーションに画像を使用するかを選べます。「true」で画像使用、「false」で画像を使用しないようにできます。
初期値は「false」です。
navImgCustomナビゲーションに画像を使用する場合、別途用意したナビゲーション用のサムネイル画像を使用するかを選べます。「true」でサムネイル画像を使用する、「false」でサムネイル画像を使用しないようにできます。
初期値は「false」です。
navImgSuffixナビゲーション用のサムネイル画像を別途用意している場合、接尾辞名を選べます。サムネイル画像には、スライド画像名に適当な接尾辞を付けてください。例えば、スライド画像が「photo-1.jpg」という名前だった場合、そのサムネイル画像は、「photo-1_thumbnail.jpg」というように適当な接尾辞をつけてください。この場合、「'_thumbnail'」としてください。

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

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

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.slidewide.js"></script>
<script>
$(function($) {
    $('.slide').slidewide({
        touch         : true,
        touchDistance : '80',
        autoSlide     : true,
        repeat        : true,
        interval      : 3000,
        duration      : 500,
        easing        : 'swing',
        imgHoverStop  : true,
        navHoverStop  : true,
        prevPosition  : 0,
        nextPosition  : 0,
        filter        : true,
        filterNav     : true,
        viewSlide     : 1,
        baseWidth     : 940,
        navImg        : false,
        navImgCustom  : false,
        navImgSuffix  : ''
    });
});
</script>
</head>
<body>
    <div class="slide">
        <ul class="slideInner">
            <li><img src="images/photo01.jpg" alt=""></li>
            <li><img src="images/photo02.jpg" alt=""></li>
            <li><img src="images/photo03.jpg" alt=""></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

.slide {
    position:relative;
    overflow:hidden;
    width:100%;
    padding-bottom:25px;
}

.slidePrev {
    position:absolute;
    cursor:pointer;
    z-index:100;
}

.slideNext {
    position:absolute;
    cursor:pointer;
    z-index:100;
}

.slidePrev img {
    position:absolute;
    width:50px !important;
    height:60px !important;
}

.slideNext img {
    position:absolute;
    width:50px !important;
    height:60px !important;
}

.slideInner {
    position:relative;
    margin:0;
    padding:0;
}
.slideInner li {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
}
.slideInner li img {
    margin:0 5px;
    padding:0;
}

.filterPrev {
    position:absolute;
    left:0;
    opacity:0.5;
    filter:alpha(opacity=50);
    background-color:#fff;
}

.filterNext {
    position:absolute;
    right:0;
    opacity:0.5;
    filter:alpha(opacity=50);
    background-color:#fff;
}

.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;
}

左右のナビボタンやフッター部分のナビゲーション(ページネーション)は、デザインや配置箇所によってCSSを変更してください。

左右のナビボタンは初期位置は画像の真ん中の外側です。オプション(『prevPosition』『nextPosition』)で位置を変更できます。

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

画像の間に隙間を空けたい場合は、43行目のように、『margin:0 5px;』というようにmarginか、もしくはpaddingで空けてください。

更新履歴

2017-01-18
ver2.8公開 オプションのbaseWidthの値を初期値にした際、不具合が出ていたのを修正しました。
2016-05-10
ver2.7公開 ページの読込みが遅いときにレイアウト崩れが起きるのを最小限にしました。ソースコードを一部修正しました。
2016-05-06
ver2.6公開 スライドショーの横幅を指定できるように修正しました。左右のナビゲーションの表示/非表示を選べるようにしました。
2016-04-29
ver2.5公開 ブラウザサイズ変更時にスライドショーのレイアウト崩れが起こるのを修正しました。
2015-12-28
ver2.4公開 一部ソースコードを修正しました。
2015-10-06
ver2.3公開 一部ソースコードを修正しました。
2015-08-17
ver2.2公開 IE8の不具合対応
2015-08-14
ver2.1公開 ナビゲーションの画像化に対応
2015-08-09
ver2.0公開
2015-05-17
ver1.0公開
ページのトップへ戻る