###実現したいこと
bxsliderというjqueryのスライダープラグインを使用してスライダーの表示をしました。
(ウィンドウの横幅いっぱいに表示をしたかったため、こちらのmod版を使用しました)
https://lab-inc.jp/staffblog/front-end/javascript/201509/02_16.html
スライダー自体は、期待する挙動で動作しているのですが
今回、このスライダーの中央の画像に、もう一枚画像を重ねたいのです。
具体的に説明すると、
テキストが記載されている透過PNGの画像を上に重ねて
スライダーに使用しているどの画像が中央に表示されても
同じ位置に画像のテキストが表示されるようにしたいです。
スライダーの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}
回答1件
あなたの回答
tips
プレビュー