JavaScript

完全ガイド：jquery.sliderPro.jsで作るレスポンシブ対応・縦横スワイプ対応の画像スライダー

  /

本記事では、jQueryライブラリの一つである「jquery.sliderPro.js」を用いて、レスポンシブ対応で縦横にスワイプ可能な画像スライダーの作成方法を詳しく解説します。
マウススカーソルをサムネイル上で右クリックした状態で上下スライドさせるとサムネイルがスライドします。
初心者でも理解しやすいよう、具体的なコード例を交えて説明しますので、ぜひ最後までご覧ください。

Contents

はじめに

Webサイトにおいて画像スライダーは、ユーザーの関心を引くための効果的な手段です。特にレスポンシブデザインが求められる現代において、どのデバイスからアクセスしても美しく表示されるスライダーは非常に重要です。jquery.sliderPro.jsは、そのような現代の要求に応えるための強力なツールを提供します。

jquery.sliderPro.jsの基本

jquery.sliderPro.jsは、高度なカスタマイズが可能で、レスポンシブデザインに対応したJavaScriptプラグインです。このプラグインを使用することで、画像だけでなくテキストやHTMLコンテンツを含むスライドを作成できます。

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>

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>

　
レスポンシブデザインは現代のWebデザインにおいて必須の要素です。jquery.sliderPro.jsは、breakpointsオプションを通じて、異なる画面サイズに基づいた異なる設定を適用することが可能です。これにより、ユーザーがどのデバイスを使用していても、最適なビューを提供できます。

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

実際にスライダーを体験してみたい場合は、以下のデモページをご覧ください。

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

ソース元：slider-pro

slider-pro

まとめ

jquery.sliderPro.jsを使用することで、縦横自由にスワイプ可能な美しい画像スライダーを簡単に実装することができます。この記事で紹介した基本的な使い方をマスターすれば、さらに複雑な機能も自在に扱うことが可能になるでしょう。自分のWebサイトに合わせて、ぜひカスタマイズしてみてください。

この記事が皆さんのWeb開発において役立つ情報を提供できたなら幸いです。画像スライダーの導入を検討している方々にとって、より魅力的でユーザーフレンドリーなサイト作りの一助となればと思います。

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

画像スライダー スライダー jquery.sliderPro.js
関連記事