サムネイル画像もスライドするイメージスライダー Synchro Slider

Synchro Sliderサムネイル画像もスライドするイメージスライダー Synchro Slider jQueryプラグインをリリースしました。Synchro Sliderは、ブラウザ幅いっぱいにスライダーを配置しサムネイル画像も同時にスライドするjQueryプラグインです。レスポンシブWEBデザインに対応していてブラウザ幅に合わせてスライダーサイズが変わり、スマホ等のブラウザ幅が狭い場合はサムネイル画像が非表示になる仕様です。Synchro Slider jQueryプラグインは、MITライセンスです。

Download Demo

使い方

Synchro Slider jQueryプラグインの他にjQueryjQuery Easingプラグインを使用します。CSSとスクリプトを読み込みます。

<link rel="stylesheet" href=" ./css/SynchroSlider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="./js/jquery.SynchroSlider.js"></script>

スライダーで使用する画像を配置します。サムネイル画像は、data-thumbのパラメーターでファイル名を指定します。

<div class="synchro_slider">
     <ul>
          <li><a href="#1"><img src="./images/slider_img01.jpg" alt="" width="960" height="380" data-thumb="slider_thumb01.jpg" /></a></li>
          <li><a href="#2"><img src="./images/slider_img02.jpg" alt="" width="960" height="380" data-thumb="slider_thumb02.jpg" /></a></li>
          <li><a href="#3"><img src="./images/slider_img03.jpg" alt="" width="960" height="380" data-thumb="slider_thumb03.jpg" /></a></li>
          <li><a href="#4"><img src="./images/slider_img04.jpg" alt="" width="960" height="380" data-thumb="slider_thumb04.jpg" /></a></li>
          <li><a href="#5"><img src="./images/slider_img05.jpg" alt="" width="960" height="380" data-thumb="slider_thumb05.jpg" /></a></li>
          <li><a href="#6"><img src="./images/slider_img06.jpg" alt="" width="960" height="380" data-thumb="slider_thumb06.jpg" /></a></li>
          <li><a href="#7"><img src="./images/slider_img07.jpg" alt="" width="960" height="380" data-thumb="slider_thumb07.jpg" /></a></li>
     </ul>
</div><!--/.synchro_slider-->

Synchro Sliderを実行します。

<script type="text/javascript">
$(window).load(function() {
     $('.synchro_slider').SynchroSlider();
});
</script>

オプションを指定して実行する場合は、以下のように記述します。

$('.synchro_slider').SynchroSlider({
    'baseWidth'   : '960',
    'baseHeight'  : '522',
    'minWidth'    : '860',
    'minHeight'   : '340',
    'thumbWidth'  : '192',
    'thumbCount'  : '5',
    'thumbPath'   : './images/',
    'thumbOpacity': '0.7',
    'slideSpeed'  : '800',
    'delayTime'   : '4000',
    'easing'      : 'easeInOutQuad',
    'autoPlay'    : '1',
    'flickMove'   : '1'
});
名前 タイプ デフォルト 説明
baseWidth 数値 960 基準となる表示幅を指定します。
baseHeight 数値 522 基準となる表示高さを指定します。
minWidth 数値 860 表示幅の最小幅を指定します。この幅で指定した以下のサイズではサムネイル画像は非表示になります。
minHeight 数値 340 minWidthで指定した幅で表示した時の高さを指定します。
thumbWidth 数値 192 サムネイル画像1つの幅を指定します。
thumbCount 数値 5 表示するサムネイル画像の数を奇数で指定します。
thumbPath パス ./images/ サムネイル画像のあるフォルダまでのパスを指定します。
thumbOpacity 数値 0.7 サムネイル画像がマウスオーバーした時の透過率を指定します。0〜1
slideSpeed 数値 800 スライドのスピードを指定します。
delayTime 数値 4000 スライドの間隔を指定します。
easing 種類 easeInOutQuad Easingのエフェクトの種類を指定します。
autoPlay 0 or 1 1 自動再生をする場合は1、自動再生をしない場合は0を指定します。
flickMove 0 or 1 1 フリック機能を使用する場合は1、フリック機能を使用しない場合は0を指定します。