bxsliderの中央の画像に画像を重ねたい

###実現したいこと
bxsliderというjqueryのスライダープラグインを使用してスライダーの表示をしました。

（ウィンドウの横幅いっぱいに表示をしたかったため、こちらのｍｏｄ版を使用しました）
https://lab-inc.jp/staffblog/front-end/javascript/201509/02_16.html

スライダー自体は、期待する挙動で動作しているのですが
今回、このスライダーの中央の画像に、もう一枚画像を重ねたいのです。

具体的に説明すると、
テキストが記載されている透過ＰＮＧの画像を上に重ねて
スライダーに使用しているどの画像が中央に表示されても
同じ位置に画像のテキストが表示されるようにしたいです。

スライダーのdivに
position:relative
重ねて表示したい画像のimgに
position:absolute
を指定して、表示を試みたのですが
ウィンドウサイズを変更した際に、
重ねた画像の表示位置がずれてしまいます。

希望する挙動としては、ウィンドウサイズを縮めた時には
スライダーの中央に表示されている画像と同じように縮小してほしいです。
要するに、中央の画像の特定の位置に常に画像が重なっていてほしいです。

###該当のソースコード(HTML)

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="robots" content="noindex">
6  <meta name="viewport" content="width=device-width,user-scalable=0">
7  
8  <link rel="stylesheet" href="css/ress.css">
9  <link rel="stylesheet" href="css/style.css">
10  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bxslider/4.1.2/jquery.bxslider.css" />
11  <link rel="stylesheet" href="css/slider.css">
12  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
13  <script src="js/jquery.bxslider.js"></script>
14  
15<title>TEST</title>
16</head>
17<body>
18  
19  <div class="mod-bxslider-demo-01">
20    <!--  重ねたい画像  -->
21    <img src="images/text.png" class="cover" id="slider_wrap" /> 
22    <ul class="js-demo-01">
23      <li><a href="#"><img src="images/slide01_pc.jpg" alt="画像1"></a></li>
24      <li><a href="#"><img src="images/slide02_pc.jpg" alt="画像2"></a></li>
25      <li><a href="#"><img src="images/slide03_pc.jpg" alt="画像3"></a></li>
26    </ul>
27  </div>
28  </body>
29
30  <script>
31    (function ($) {
32      $(window).on("load", function () {
33        $(".js-demo-01").bxSlider({
34          auto: true,
35          infiniteLoop: true,
36          responsive: true,
37          speed: 1000,
38          displaySlideQty: 1,
39          pager: true,
40          slideWidth: 960,
41          startSlide: 0,
42          minSlides: 1,
43          maxSlides: 1,
44          moveSlides: 1,
45          slideMargin: 0,
46          pause: 4000,
47        });
48      });
49    }(jQuery));
50  </script>
51
52</html>

###該当のソースコード(css)

css
1
2.mod-bxslider-demo-01 {
3  overflow: hidden;
4  position: relative;
5  width: 100%;
6}
7
8.bx-viewport:before,
9.bx-viewport:after {
10  content: "";
11  position: absolute;
12  top: 0;
13  bottom: 0;
14  left: -100%;
15  background-color: rgba(0, 0, 0, 0.3);
16  z-index: 1000;
17}
18
19.bx-wrapper .bx-viewport {
20  overflow: visible !important;
21  left: 0;
22  border-width: 0;
23  box-shadow: none;
24}
25
26.bx-viewport:before {
27  right: 100%;
28  left: -100%;
29}
30
31.bx-viewport:after {
32  left: 100%;
33  right: -100%;
34}
35
36.cover{
37  position: absolute;
38  left: 100px;
39  top: 100px;
40/* ここのwidthとheightは重ねたい画像のサイズを入れています */
41  width:576px;
42  height:319px;
43  z-index: 300;
44}

kei344

2016/07/25 15:36

.coverのleft:/top:が固定値ですが、どの幅のときも固定値でしょうか。

ludient

2016/07/25 15:51

.coverのleft:/top:/はメディアクエリなどでウィンドウサイズでの切り替えはしておりません。固定値で記載していますが、試行錯誤の結果なので、固定値で指定したいというわけではありません。分かりにくくて申し訳ありません。

LibertyBell3

2016/07/25 22:40

ほぼ同じような案件を制作しましたが、その時は、bxSliderだと、読み込みのタイミングが悪いのか、上にのせる部分のサイズがきれいに取得されなかったので、FlexSliderに変更した経験があります。私は本体を思い通りにいじられるだけのスキルは無いので…(笑) で、他のScriptになってもいい＆スライダー画像のリンクから直接移動できなくなる方法で良ければ回答いたしますが、いかがでしょうか？ちなみに、上に載せる画像にはリンク設定可能ですので、同一ページに飛ぶ設定であれば、なんとか実現可能かと思います。

ludient

2016/07/26 00:12

ご提案ありがとうございます！ bxsliderでなくても問題ありませんので、ひとつの案として是非ご教授いただけないでしょうか…？よろしくお願いいたします。

LibertyBell3

2016/07/26 02:42

すみません。寝ておりました…私の対応より簡潔だし、お望み通りになって良かったです。

ludient

2016/07/26 07:31

コメントありがとうございます！今回は、希望する動作がbxsliderで実現できたのですが FlexSliderを使用するという、ご経験に基づいたご回答もすごく参考になりました！とても感謝しております。

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

回答1件

ベストアンサー

CSS
1.cover{
2  position: absolute;
3  left: 100px;
4  top: 100px;
5/* ここのwidthとheightは重ねたい画像のサイズを入れています */
6  width:576px;
7  height:319px;
8  z-index: 300;
9}

上記CSSでは上に重ねる画像のサイズと配置が固定pxになっています。

希望する挙動としては、ウィンドウサイズを縮めた時には

スライダーの中央に表示されている画像と同じように縮小してほしいです。
要するに、中央の画像の特定の位置に常に画像が重なっていてほしいです。

このようにしたいのであれば、上に重ねる画像のサイズと配置も%の相対サイズで指定しないとダメではないでしょうか？
サイズについてはスライダー領域を親としてそのwidthとheightを基準に割合を算出すれば良いです。
位置を常に上下左右中央に配置したいのであれば、次のようにabsolute指定すれば全ブラウザ環境で中央になるはずです。（基準となる親要素がスライダー領域全体をちゃんと囲んでいることが前提。念のため要確認）

CSS
1/*上下左右中央に絶対配置するためのコード*/
2セレクタ {
3  position: absolute;
4  left: 0;
5  right: 0;
6  top: 0;
7  bottom: 0;
8  margin: auto;
9}

投稿2016/07/26 01:49

aKusano

総合スコア3763

ludient

2016/07/26 02:27

aKusano様のご回答を元に、重ねる画像のサイズを%で相対指定し配置もスライダーの領域を基準として相対指定したところ、希望するような表示になりました。本当に助かりました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

bxsliderの中央の画像に画像を重ねたい

関連した質問