CoolWebWindow

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

無料jQueryプラグイン [カルーセルバナー]

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

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

スマートフォンで閲覧した場合は、スワイプで画像を変更できるようにしています。レスポンシブWebデザイン対応で、ブレークポイントを指定することにより、ブラウザのサイズによって、画像の表示枚数を変更することが可能です。

ブラウザのサイズを変更した際に、できるだけ動作不良を起こさないように設定はしているのですが、タイミングによってはそのようなことが起こる場合があります。その際は、一度リロード(再読み込み)していただくと正常表示に戻ります。

ブラウザのサイズを変更した際に、負荷がかからないように処理回数を減らしているので、少し遅れてレイアウト変更が起こります。

オプションで、

  • スワイプ機能(touch)
  • スワイプの感度(touchDistance)
  • オートスライド機能(autoSlide)
  • 繰り返しのあり/なし(repeat)
  • スライドする効果の種類の変更(easing:liner/swing)
  • 1枚あたりの表示時間の変更(interval)
  • 切り替わるスピードの変更(duration)
  • 画像にマウスオーバーしたときにオートスライド一時停止(imgHoverStop)
  • ナビゲーションにマウスオーバーしたときにオートスライド一時停止(navHoverStop)
  • 表示するスライド数の変更(viewSlide)
  • スライドする枚数の変更(1枚 or 表示画像分)(skip)
  • ブレークポイントの指定(breakpoint)
  • 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」です。
viewSlide表示する画像枚数を指定します。
初期値は「1」です。
skipスライドさせる画像数を1枚ずつか、表示枚数分かを選べます。「true」で表示枚数分をスライド、「false」で1枚ずつスライドします。
初期値は「true」です。
responsiveレスポンシブに対応させるかどうかを選べます。「true」でブレークポイントを指定が有効になります。「false」でブラウザのサイズを小さくすると画像も小さくなります。
初期値は「true」です。
breakpointブレークポイントを指定を指定します。設定方法に注意が必要です。例えば、ウィンドウサイズ479px以下で表示枚数1枚、ウィンドウサイズ767px以下で表示枚数2枚、ウィンドウサイズ1023px以下で表示枚数3枚にしたい場合は、「 [{'width':479, 'viewSlide':1},{'width':767, 'viewSlide':2},{'width':1023, 'viewSlide':3}] 」というように記述します。
尚、デフォルト時の指定も自動的にブレークポイントに指定されます。
初期値は「[{'width':479, 'viewSlide':1}]」です。

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

色々と設定方法に注意が必要です。まず、初期の画像サイズをCSSで設定する必要があります。レスポンシブに対応しているので画像が拡大・縮小するので、それを考慮して画像のサイズは少し大きめに作っていたほうが良いでしょう。下記のCSSの記述の65行目のように、「.slideInner li」に対してwidthで初期の画像サイズを指定します。画像サイズ自体は71行目のように「.slideInner li img」に対して「width:100%」にしてしてください。また、画像に余白を持たせたい場合は、画像に指定するのではなく、その親要素である「.slideInner li」に対してmarginかpaddingで余白を設けてください。

左右のナビゲーションの位置設定ですが、スライドの左右に設置する場合は、横のサイズは固定表示しかできません。縦のサイズはある程度融通は効きます。下記のCSSの記述の4行目のように、あらかじめ、「.slider」のpaddingでナビゲーションを設置する分の余白を空けます。そして、その位置に対して絶対配置でナビゲーションを配置します。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>[DEMO]カルーセルバナー</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.carousel.js"></script>
<script type="text/javascript">
$(function($) {
    $('.slider00').carousel({
        touch         : true,
        touchDistance : '80',
        autoSlide     : true,
        repeat        : true,
        imgHoverStop  : true,
        navHoverStop  : true,
        interval      : 3000,
        duration      : 500,
        easing        : 'swing',
        viewSlide     : 1,
        skip          : true,
        responsive    : true,
        breakpoint    : [{'width':479, 'viewSlide':1}]
    });
</script>
</head>
<body>
<div class="slider">
    <div class="slide">
        <ul class="slideInner">
            <li><a href="index.html"><img src="images/img01.gif" alt="" /></a></li>
            <li><a href="index.html"><img src="images/img02.gif" alt="" /></a></li>
            <li><a href="index.html"><img src="images/img03.gif" alt="" /></a></li>
            <li><a href="index.html"><img src="images/img04.gif" alt="" /></a></li>
            <li><a href="index.html"><img src="images/img05.gif" alt="" /></a></li>
            <li><a href="index.html"><img src="images/img06.gif" alt="" /></a></li>
            <li><a href="index.html"><img src="images/img07.gif" alt="" /></a></li>
       </ul>
        <div class="slidePrev"></div>
        <div class="slideNext"></div>
        <div class="controlNav"></div>
    </div><!--/.slide-->
</div><!--/.slider-->
</body>
</html>

CSS

.slider {
    position:relative;
    overflow:hidden;
    padding:0 55px;
    margin:0 auto;
}

.slide {
    position:relative;
}

.slidePrev {
    position:absolute;
    width:45px;
    height:45px;
    top:50%;
    left:-50px;
    margin-top:-22.5px;
    cursor:pointer;
    z-index:100;
    background:url(../images/nav.png) 0 50% no-repeat;
}

.slidePrev:hover {
    background:url(../images/nav.png) -45px 50% no-repeat;
}

.slidePrev.hidden {
    cursor:default;
    background:url(../images/nav.png) -90px 50% no-repeat;
}

.slideNext {
    position:absolute;
    display:block;
    width:45px;
    height:45px;
    top:50%;
    margin-top:-22.5px;
    right:-50px;
    cursor:pointer;
    z-index:100;
    background:url(../images/nav.png) -135px 50% no-repeat;
}

.slideNext:hover {
    background:url(../images/nav.png) -180px 50% no-repeat;
}

.slideNext.hidden {
    cursor:default;
    background:url(../images/nav.png) -225px 50% no-repeat;
}

.slideInner {
    overflow:hidden;
    position:relative;
    margin:0;
    padding:0;
}

.slideInner li {
    box-sizing:border-box;
    float:left;
    width:260px;
    margin:0;
    padding:0 5px;
    list-style:none;
}

.slideInner li img {
    width:100%;
    margin:0;
    padding:0;
    border:0;
    vertical-align:bottom;
}

.controlNav {
    position:relative;
    float:left;
    left:50%;
    margin:10px 0;
}

.controlNav span {
    position:relative;
    left:-50%;
    float:left;
    margin:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    width:10px;
    height:10px;
    overflow:hidden;
    text-indent:-9999px;
    vertical-align:middle;
    background:#ddd;
}

.controlNav span:hover {
    background:#ccc;
    cursor:pointer;
}

.controlNav span.current {
    background:#b7bd50;
}

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

更新履歴

2015-12-28
ver1.2公開 一部ソースコードを修正しました。
2015-09-01
ver1.1公開 ナビゲーションの不具合を修正しました。
2015-08-30
ver1.0公開
ページのトップへ戻る