JavaScript

jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダー

  /

jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダーをご紹介します。
マウススカーソルをサムネイル上で右クリックした状態で上下スライドさせるとサムネイルがスライドします。

Contents
  1. レスポンシブに対応した縦横スワイプでスライド可能な画像スライダーのCSS記述
  2. レスポンシブに対応した縦横スワイプでスライド可能な画像スライダーのHTML記述
  3. jquery.qrcode.jsを使ってQRコードを生成するJavaScriptの記述
  4. jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダーデモページ
  5. ソース元：slider-pro

レスポンシブに対応した縦横スワイプでスライド可能な画像スライダーのCSS記述

※slider-pro.min.cssファイルを読み込みます。スライドやサムネイルエリア（#sldemo1）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" type="text/css" href="slider-pro.min.css" media="screen"/>
<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.6em;
  padding: 15px 0;
}

#sldemo1 .sp-thumbnail-image-container {
  width: 100px;
  height: 80px;
  overflow: hidden;
  float: left;
}

#sldemo1 .sp-thumbnail-image {
  height: 100%;
}

#sldemo1 .sp-thumbnail-text {
  width: 170px;
    float: right;
    padding: 8px;
    background-color: #F0F0F0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#sldemo1 .sp-thumbnail-title {
  margin-bottom: 5px;
  text-transform: uppercase;
  color: #333;
}

#sldemo1 .sp-thumbnail-description {
  font-size: 14px;
  color: #333;
}

@media (max-width: 500px) {
  #sldemo1 .sp-thumbnail {
    text-align: center;
  }

  #sldemo1 .sp-thumbnail-image-container {
    display: none;
  }

  #sldemo1 .sp-thumbnail-text {
    width: 120px;
  }

  #sldemo1 .sp-thumbnail-title {
    font-size: 12px;
    text-transform: uppercase;
  }

  #sldemo1 .sp-thumbnail-description {
    display: none;
  }
}
</style>

レスポンシブに対応した縦横スワイプでスライド可能な画像スライダーのHTML記述

※スライドエリア（id=”sldemo1″）内に縦横スワイプでスライドさせるサムネイルを（1～3.jpg）を用意します。

  <h1>jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダーページです。<br>マウススカーソルをサムネイル上で右クリックした状態で上下移動させてみて下さい。</h1>

  <div id="sldemo1" class="slider-pro">
    <div class="sp-slides">
      <div class="sp-slide">
        <img class="sp-image" src="blank.gif"
          data-src="1.jpg"
          data-retina="1.jpg"/>

        <div class="sp-caption">サムネイル1</div>
      </div>

          <div class="sp-slide">
            <img class="sp-image" src="blank.gif"
              data-src="2.jpg"
              data-retina="2.jpg"/>

        <div class="sp-caption">サムネイル2</div>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="blank.gif"
          data-src="3.jpg"
          data-retina="3.jpg"/>

        <div class="sp-caption">サムネイル3</div>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="blank.gif"
          data-src="1.jpg"
          data-retina="1.jpg"/>

        <div class="sp-caption">サムネイル4</div>
      </div>

          <div class="sp-slide">
            <img class="sp-image" src="blank.gif"
              data-src="2.jpg"
              data-retina="2.jpg"/>

        <div class="sp-caption">サムネイル5</div>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="blank.gif"
          data-src="3.jpg"
          data-retina="3.jpg"/>

        <div class="sp-caption">サムネイル6</div>
      </div>

      <div class="sp-slide">
        <img class="sp-image" src="blank.gif"
          data-src="1.jpg"
          data-retina="1.jpg"/>

        <div class="sp-caption">サムネイル7</div>
      </div>

    </div>

    <div class="sp-thumbnails">
      <div class="sp-thumbnail">
        <div class="sp-thumbnail-image-container">
          <img class="sp-thumbnail-image" src="1.jpg"/>
        </div>
        <div class="sp-thumbnail-text">
          <div class="sp-thumbnail-title">SPサムネイル1</div>
          <div class="sp-thumbnail-description">テキスト1<br>&nbsp;</div>
        </div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-image-container">
          <img class="sp-thumbnail-image" src="2.jpg"/>
        </div>
        <div class="sp-thumbnail-text">
          <div class="sp-thumbnail-title">SPサムネイル2</div>
          <div class="sp-thumbnail-description">テキスト2<br>&nbsp;</div>
        </div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-image-container">
          <img class="sp-thumbnail-image" src="3.jpg"/>
        </div>
        <div class="sp-thumbnail-text">
          <div class="sp-thumbnail-title">SPサムネイル3</div>
          <div class="sp-thumbnail-description">テキスト3<br>&nbsp;</div>
        </div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-image-container">
          <img class="sp-thumbnail-image" src="1.jpg"/>
        </div>
        <div class="sp-thumbnail-text">
          <div class="sp-thumbnail-title">SPサムネイル4</div>
          <div class="sp-thumbnail-description">テキスト4<br>&nbsp;</div>
        </div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-image-container">
          <img class="sp-thumbnail-image" src="2.jpg"/>
        </div>
        <div class="sp-thumbnail-text">
          <div class="sp-thumbnail-title">SPサムネイル5</div>
          <div class="sp-thumbnail-description">テキスト5<br>&nbsp;</div>
        </div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-image-container">
          <img class="sp-thumbnail-image" src="3.jpg"/>
        </div>
        <div class="sp-thumbnail-text">
          <div class="sp-thumbnail-title">SPサムネイル6</div>
          <div class="sp-thumbnail-description">テキスト6<br>&nbsp;</div>
        </div>
      </div>

      <div class="sp-thumbnail">
        <div class="sp-thumbnail-image-container">
          <img class="sp-thumbnail-image" src="1.jpg"/>
        </div>
        <div class="sp-thumbnail-text">
          <div class="sp-thumbnail-title">SPサムネイル7</div>
          <div class="sp-thumbnail-description">テキスト7<br>&nbsp;</div>
        </div>
      </div>

    </div>
    </div>

jquery.qrcode.jsを使ってQRコードを生成するJavaScriptの記述

※jquery-1.11.0.min.js、jquery.sliderPro.jsファイルを読み込みます。$(スライドエリア).sliderPro({スライドやサムネイル表示オプション})を記述します。スライドやサムネイル表示オプションには縦 or 横スライド、画像サイズ、位置、矢印の表示等を設定します。今回は縦スライド（vertical）を設定してます。

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.sliderPro.js"></script>

<script type="text/javascript">
  $( document ).ready(function( $ ) {
    $( '#sldemo1' ).sliderPro({
      width: 670,
      height: 500,
      orientation: 'vertical',
      loop: false,
      arrows: true,
      buttons: false,
      thumbnailsPosition: 'right',
      thumbnailPointer: true,
      thumbnailWidth: 290,
      breakpoints: {
        800: {
          thumbnailsPosition: 'bottom',
          thumbnailWidth: 270,
          thumbnailHeight: 100
        },
        500: {
          thumbnailsPosition: 'bottom',
          thumbnailWidth: 120,
          thumbnailHeight: 50
        }
      }
    });
  });
</script>

jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダーデモページ

jquery.sliderPro.jsを使ってレスポンシブに対応した縦横スワイプでスライド可能な画像スライダーデモページ

ソース元：slider-pro

slider-pro

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像スライダー スライダー jquery.sliderPro.js
RELATED POST