表題の通り、モダールウィンドウ内の要素にスライドショーを組み込みたいのですが
正しく表示されずスライドショーの要素が崩れてしまうので知恵を貸していただけたらと思います。
ソースが競合してしまっているのだと思うのですがどこを手直しすればよいのかわからず困っています・・
使用プラグイン
Magnific、bxslider
症状
Magnific内に表示させたbxsliderのレイアウトが崩れてしまう
希望
レスポンシブに対応したスライドショーの表示
html
1<script type="text/javascript" src="/shared/magnific/jquery.magnific-popup.js"></script> 2<link rel="stylesheet" href="/shared/magnific/magnific-popup.css" type="text/css" media="screen" /> 3<script src="/shared/bxslider/jquery.bxslider.min.js"></script> 4<link rel="stylesheet" href="/shared/bxslider/jquery.bxslider.css" type="text/css" media="screen" /> 5 6<script> 7$(function(){ 8 $('.popup').magnificPopup({ 9 type:'inline' 10 }); 11}); 12$(function(){ 13 $('.bxslider').bxSlider({ 14 auto:true 15 }); 16}); 17</script> 18 19<div id="test-popup" class="white-popup mfp-hide"> 20 21<div class="bxslider-content"> 22<ul class="bxslider"> 23<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gallery/01.jpg" alt=""></li> 24<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gallery/02.jpg" alt=""></li> 25<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gallery/03.jpg" alt=""></li> 26<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gallery/04.jpg" alt=""></li> 27</ul> 28</div> 29 30</div> 31
css
1 2.white-popup { 3 position: relative; 4 background: #FFF; 5 padding: 95px 20px 20px; 6 width: auto; 7 max-width: 1200px; 8 margin: 20px auto; 9 max-height: 800px; 10 overflow-y: scroll; 11 overflow-x: hidden; 12} 13.bxslider-content{ 14 position: relative; 15 width: 100%; 16 display: block; 17} 18ul.bxslider li { 19 width: 500px; 20 height: 600px; 21 position: relative; 22} 23ul.bxslider li img { 24 position: absolute; 25 top: 0; 26 right: 0; 27 bottom: 0; 28 left: 0; 29 max-width: 100%; 30 max-height: 100%; 31 margin: auto; 32}
追記1
ul.bxslider li の数値が上書きされてしまいなぜか小さくなってしまうので
css
1ul.bxslider li { 2 width: 500px !important; 3 height: 600px !important; 4 position: relative; 5}
を追記しました。
画像が横幅の中央に来るようにしたいのですが、
スライドのレイアウトが崩れてしまい、位置がバラバラに表示されてしまいます。
追記2
追記1のcssを解除するとliのwidhtが100pxに強制的に変更されて小さくなる。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。