【ContentFlow】現在地の表示位置を変えたい

前提・実現したいこと

ContentFlow（http://www.jacksasylum.eu/ContentFlow/addons.php）を使って、
iTunesのカバーフロー風ギャラリーを実装しています。
画像下のレンジスライダー部分と連動して、
画像の現在地（何枚目の画像か）数が表示されていますが、
デフォルト設定だとつまみ下に表示がされるようになっています。
これを上記画像のようにレンジスライダー右横に固定で設置したいです。

該当のソースコード

HTML
1<div class="scrollbar">
2  <div class="slider"><div class="position"></div></div>
3</div>

CSS
1top: 120%;
2font-size: 16px;
3font-weight: 700;
4color: silver;
5position: absolute;
6text-align: center;

試したこと

HTML
1<div class="scrollbar">
2  <div class="slider"></div>
3</div>
4<div class="position"></div>

上記のように数値を表示している<div class="position"></div>部分を、
移動させてみましたが、表示自体がされなくなりました。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

力技なので、もっとよい方法があるような気がしますが。

css
1        .position{
2            width: 18px;
3            position: absolute;
4            left: auto !important;
5            right: -18px;
6            color: silver;
7        }

js
1        window.addEventListener('load', function(){
2            document.querySelector('.scrollbar').insertAdjacentElement('beforeend', document.querySelector('.position'));
3        });

スクリプトは、contentflow.js の後に実行してください。

#コメントを受けて追記

JavaScriptの理解を深めないと、このプラグインのカスタマイズは難しいと思います。

js
1        window.addEventListener('load', function(){
2            document.querySelectorAll('.scrollbar').forEach(function(e){e.insertAdjacentElement('beforeend', e.querySelector('.position'));});
3        });