上下に動くスライダー（jQuery プラグイン）

2016年08月08日2016年08月24日

案件で、メインビジュアルの左は上向きに、右は下向きにスライドするという仕様がありました。

bxSliderで進めようと思ったのですが、一定方向へは可能なのですが、上下への動きが出来ずどうしようかと思っていた所、上下に動くスライダー「Multirole Slider」というプラグインに行きつきました。

デモ
http://on-ze.com/demo/jquery-multirole-slider/
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Simple-Image-Scroller-slider-js/

スルスル上下に動く珍しいプラグインです。

このプラグインで、基本的な動きは再現できたのですが、
流れるような動きではなく、bxSliderのように1枚づつを静止して切り替わるような仕様がよいということになりました。

そこで、
once: false, // 動きを1コマずつ止めるかどうか
を true にしてみたものの、1コマで止まるのですが、再スタートされず止まったままになりました。

自力で、再スタートすればよいのですが、イベントハンドラは、click / hover しかありません。

ctrlClick: false, // コントローラ操作用イベントハンドラ(click)
ctrlHover: true, // コントローラ操作用イベントハンドラ(hover)

そこで、無理やりですが、setInterval を使って、実行処理自体を一定時間毎に読み込むようにしました。

setInterval(function(){
  $("#visual_left").slider({
    direction: "down", // 送り方向
    pause: false, // マウスオーバー時に一時停止するかどうか
    build: false, // 暗黙のオプション（幅の初期設定）falseで幅設定をしない
    once: true, // 動きを1コマずつ止めるかどうか
    time: 0.8 // 1px動かすのにかける時間
  });
  $("#visual_right").slider({
    direction: "up",
    pause: false,
    build: false,
    once: true,
    time: 0.8
  });
}, 3000);

上記方法が、あっているかどうかは分かりませんが、とりあえず動いたので、よしとしましょう。