画像などの要素を縦横にスクロール simplyscroll.js/jquery

公開日：2013/10/10 最終更新日：2022/08/27

jQuery webパーツサンプルソース商品画像

以前の書いた記事

ネットショップ運営の気になる備忘録

[楽天][jQuery]商品画像を横に自動スライドする[endless_scroll_min.js]

と似たような内容になりますが、ショップページに商品を陳列する際スペースがない場所でも自動でスクロールさせて動かすことで、多くの商品をお客さんの目に止めることが可能になります。

本日は、縦にも横にも画像などの要素をスクロールさせる方法を紹介したいと思います。

画像を縦横にスクロール「simplyscroll.js」

では、具体的にどんな表示イメージかというと

本日は無料化で何かと話題なYahoo!ショッピングから紹介したいと思います。
こちらのショップ　靴ショップやまう

ページ中ごろにある「瞬足」が並んでいる部分を見てもらうと画像がスクロールしています。

実装方法について

simplyscrollの公式サイトより、jquery.simplyscroll.zipをダウンロードしてください。

ダウンロードしたファイルの中から
「jquery.simplyscroll.js」
「jquery.simplyscroll.css」
「buttons.png」
の３つを使います。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。
サンプルソース sample1.html

<link rel="stylesheet" href="jquery.simplyscroll.css" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.simplyscroll.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
    $(function() {
        $("#slider").simplyScroll();
  });
})(jQuery);
</script>
 
  <ul id="slider">
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>
    <li>
      <img src="画像URL">
    </li>   
  </ul>

1、2、3行目ダウンロードした３つのファイルを読み込みんでいます。
(サーバー内にアップするのを忘れないでください。サンプルソースは同一フォルダにファイルを配置した場合なのでパスも環境に合わせて変更してください)

4～10行目でスライダーの設定、実行をしている部分です。
ここで、動き、表示等の設定を行います。また、実行時には＜ul id=”slider”＞のidを指定しています。
htmlの記述部分も、非常にシンプルですね。
必要な数だけ＜li＞＜img src=””＞＜/li＞を設定します。
もちろん、画像からのリンク設定も出来ます。
品名や価格などを表示したい場合も＜li＞＜/li＞内に記述可能です。

あとは jquery.simplyscroll.css 内で表示する画像に合わせて幅、高さを調整する必要があります。

【横スライドの場合】
140、141行目（width、height）、146、147行目（width、height）で全体の表示領域を調整します。
154、155行目（width、height）で１つの画像の表示領域を調整します。

【縦スライドの場合】
182、183行目（width、height）、188、189行目（width、height）で全体の表示領域を調整します。
195、196行目（width、height）で１つの画像の表示領域を調整します。

動作サンプル（デフォルト）

実行時のオプション等など指定しない場合

自動スクロールなし、スピード指定

実行の記述部分にオプションを指定します。

<script type="text/javascript">
(function($) {
  $(function() {
    $("#slider").simplyScroll({
      auto: false,
      speed: 5
    });
  });
})(jQuery);
</script>

縦にスライド

実行の記述部分にオプションを指定します。

<script type="text/javascript">
(function($) {
  $(function() {
    $("#slider").simplyScroll({
      orientation: 'vertical',
      auto: true,
      manualMode: 'loop',
      frameRate: 10,
      speed: 5
    });
  });
})(jQuery);
</script>

他にもマウスオーバー時にスクロール停止
pauseOnHover:true / false

自動スクロール停止ボタンを表示
pauseButton:false / true

スクロールする向きを指定
direction:’forwards’ / ‘backwards’

など実行時のオプションとして指定することが出来ます。
詳しくは、公式サイトにて確認ください。
ページにスペースがない時など商品情報を陳列すれば良いかもしれません。
ぜひ、活用してみてください。

画像スライダーに関する別記事

ネットショップ運営の気になる備忘録