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

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

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

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

Q&A

解決済

1回答

1435閲覧

モダールウィンドウ内にスライドショーを組み込みたい

maru_mkp

総合スコア15

jQuery

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

0グッド

0クリップ

投稿2018/10/11 09:37

編集2018/10/12 02:31

表題の通り、モダールウィンドウ内の要素にスライドショーを組み込みたいのですが
正しく表示されずスライドショーの要素が崩れてしまうので知恵を貸していただけたらと思います。
ソースが競合してしまっているのだと思うのですがどこを手直しすればよいのかわからず困っています・・

使用プラグイン
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に強制的に変更されて小さくなる。

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

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

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

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

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

guest

回答1

0

自己解決

pc tablet smpすべての横幅を設定しwidthをautoから数値に変更しました。

投稿2018/10/12 02:45

maru_mkp

総合スコア15

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問