jQuery 「jQuery Slider²」を使い、さらに弄ってみた

以前bxsliderを使う記事を上げた。
じゃあもうスライダーはこれでいいな、と思っていたら、
なぜかまったく関係ない要素表示が乱れるというバグが発生。
原因が全然分からんかったので、jQuery Slider²に乗り換えてみた。

参考サイト
・とても簡単で軽量なjQueryスライダー「jQuery Slider2」を使ってみる | bl6.jp

まずは実行だ

というわけでサイトからダウンロードしてきてテスト。

特に特別なこともなく、jsファイルとcssファイルを読み込んだら、

htmlに動かしたい要素を追加してjavascriptで要素を指定してやるだけ。

さて、ここでひとつ問題にぶち当たった。

どうにもjQuery Slider²はページナビを右端から順繰り表示がデフォらしい。

オプションやcssを弄ってどうにかならんかと思ったけど、

オプションにはないし、cssはabsoluteが指定されているしでどうしようもない感じ。

仕方ないから、jsファイルを弄る。

ページナビをセンタリングする

参考サイト

・[CSS]absolute絶対的で真ん中寄せにする

・jQueryでCSSを追加/削除する時のまとめ

使用ツール

・Online JavaScript beautifier

まずはcssから余計な要素を削除しする。具体的にはtopとかrightとか。

leftは50%指定に変更。

/*---------------------------------------------------------------------------*/

.jquery-slider-pages {

   overflow: visible;

   position: absolute;

   bottom: 5px;

   left: 50%;

}

/*---------------------------------------------------------------------------*/

そしてjsファイルをツールで整形。

jquery-slider-pagesクラスを追加している部分で

要素数×ページナビの横幅÷２

ピクセル分margin-leftをマイナスしてあげよう。

/*---------------------------------------------------------------------------*/
if (settings.showProgress) {
positionEls.CSS("margin-left", -(count*pixel/2)+"px");
$this.append(positionEls);
}
/*---------------------------------------------------------------------------*/

これでセンタリングが完了。

それっぽい見た目にはなったかな。