Easy Sliderで縦スクロールするために実行したこと

一昔前は、jQueryのスライドショーを探すのさえ一苦労したものですが……。
最近はレスポンシブデザイン対応のスライドショーが増えてきて、ありがたい限りです。
しかも私のようにjava scriptがほとんど分からない身の程知らずでも簡単に設置できるものが結構あります。

その中で真っ先に行き着いたのが、Easy Slider。
こちらで詳しく説明されています。

jQueryで作る横スライド「easySlider」(ウェブ学のすすめ様)

私も一からお世話になったのですが、少しだけ壁にぶち当たりました。
このような注文があったのです。

縦スクロールにしてください。

縦にする方法は、数々のブログなどで紹介されています。

vertical:true

※当記事は、Easy Slider1.7の場合です。他バージョンの動作は保証できません。
ちなみに、作成されたのは数年前なので、使い方を説明しているサイトで紹介されている、ヘッダー部分に書き込むコードのjqueryのバージョンは1.7とか8ですが、2.1.1でも普通に動作します。

head部分もしくはbodyの該当部分に書き込むこの部分に、オプションで書き加えるようです。

$(function(){
  $("#slider").easySlider();
});

オプションは下記の通りだそうです。

$(function(){
  $("#slider").easySlider({
	controlsShow:false, //コントロールバーの表示・非表示
	speed:1200, //スクロール速度
        pause: 3000, // 表示時間
	auto:true, //自動再生
	continuous:true, //ループするかどうか
        prevText: '<< 前へ', //戻るボタンのテキスト
        nextText: '次へ >>' //進むボタンのテキスト
        vertical: true, //縦方向にスライドするかどうか
  });
});

コントロールバーって?と思った、私と同じような方々へ。
ここのことです。

jQuery共通のようです
「前へ・次へ」とか「PREV・NEXT」とか表示される部分です。

そして、その縦スクロール設定にしたのはいいのですが

その設定だけでは、スライド枚数を重ねるごとに、何故か

目眩がしました

何故かというと、easyslider1.7.js の方で margin-left を調節して、左にスクロールさせているからです。
恐らく横スクロール用に。
なので、縦スクロールにする場合、margin-left の値を0にしなければなりません。

easyslider1.7.js の134行目を

ChromeとかFirefoxがないと割り出せませんでした

$("ul",obj).css("margin-left",(t*h*-1));

$("ul",obj).css("margin-left",(0));

この方法で、画像が左に寄らないまま縦スクロールするようになりました。

【ハートブレーン】http://heartbrain.net

メールでのお問合せ・お見積りはコチラ