jquery「Slider Pro」の矢印の位置を変えたい

Question

jquery「Slider Pro」を以下のサイトのようにブラウザ幅いっぱいで表示させるようにしようとしています。
http://goo.gl/uZ1Jxb
左右の矢印がブラウザの端にあるのですが、これを中央画像の中におさめたいと思っています。
ここの一番上「シンプル」のような位置です。
http://gimmicklog.main.jp/demo/slider-pro/slider-pro.html

「.sp-horizontal .sp-previous-arrow」と「.sp-horizontal .sp-next-arrow」を修正すれば左右に動くというのはわかったのですが、ブラウザ幅から○pxと言う設定しか出来ないようです。
これを中央画像から○pxと言う風に設定するにはどのように記述したら良いですか?

Answer 1

ブラウザ幅から○pxと言う設定しか出来ないようです。

そういう訳ではないかと思います。
.sp-previous-arrow に対して、left: 20px
となっているため、そうなっているだけかと思います。

ですので、

これを中央画像から○pxと言う風に設定するにはどのように記述したら良いですか?

としたいのであれば、
まず矢印を中央に配置する、そしてそこから**px移動する、
というCSSに変更すれば解決するかと思います。

.sp-previous-arrowの

left: 20px

を

    left: 50%;
    margin-left: -200px;

にすれば意図した表示になるかと思います。

Comments

[terataka]

詳細な説明ありがとうございます。
無事目的の場所に移動する事が出来ました。

余談ですが…
センター位置がずれてるんでしょうか?全く同じ位置に表示させようとすると、左右のマージンが違ってました。
(1000pxの画像で、left: 50%;margin-left: -500px;とright: 50%;margin-right: -472px;で画像の端ぴったり)
表示がおかしいわけではないので、そんな物なんだと思っておけばいいんですけど、気になっちゃいました(笑)

Answer 2

この「シンプル」のようなタグ構成になっているのですよね？

<div class="slider-pro sp-horizontal sp-has-buttons" id="simple" style="width: 100%; max-width: 600px;">
  <div class="sp-slides-container">
    <div class="sp-arrows sp-fade-arrows">
      <div class="sp-arrow sp-previous-arrow"></div>
      <div class="sp-arrow sp-next-arrow"></div>
    </div>
  </div>
</div>

一番親の.slider-pro の position が relative になっていて、
.sp-arrow は absolute になっているので、
このタグ構造になっているのであれば「中央画像から○px」という位置関係になっていると思います。