質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

10596閲覧

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

terataka

総合スコア61

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/02/25 01:19

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と言う風に設定するにはどのように記述したら良いですか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

ですので、

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

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

.sp-previous-arrow

css

1left: 20px

css

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

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

イメージ説明

投稿2016/02/25 04:20

編集2016/02/25 04:27
ikki57

総合スコア290

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

terataka

2016/02/25 05:00

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

0

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

HTML

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

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

投稿2016/02/25 02:44

root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問