ID slideshowのhightをウィンドウサイズに合わせてフレキシブルに変わるようにしたいのですがうまくいきません。
CSSで#slideshowをposition:relativeにし、含む子要素を全てposition:absoluteにしているため#slideshowは高さを数値で設定しなければいけない状態となっています。しかしレスポンシブルにしたいためJqueryにて調整を試みている次第です。
※jquery初心者のためとんちんかんな記述かもしれませんが、上記部部分の他にも改善点ありましたらお教えいただけると幸いです。
###発生している問題・エラーメッセージ
エラーメッセージは表示されないのですが、記述内容も反映されない状態です。
###該当のソースコード
HTML
1 <div id="slideshow"> 2 <p class="active"> 3 <a href="リンク先"><img src="images/photo1.jpg" alt="画像1"></a> 4 キャプション1 5 </p> 6 <p> 7 <a href="リンク先"><img src="images/photo2.jpg" alt="画像2"></a> 8 キャプション2 9 </p> 10 <p> 11 <a href="リンク先"><img src="images/photo3.jpg" alt="画像3"></a> 12 キャプション3 13 </p> 14</div> 15
css
1#slideshow { 2 position: relative; 3 width: 100%; 4 height: 500px; 5} 6 7#slideshow p { 8 position: absolute; 9 top: 0; 10 left: 0; 11 z-index: 8; 12 opacity: 0.0; 13 margin: 0; 14 background-color:#000; 15 height: 100%; 16} 17 18#slideshow p.active { 19 z-index: 10; 20 opacity: 1.0; 21} 22 23#slideshow p.last-active { 24 z-index: 9; 25} 26 27#slideshow p img { 28 width:auto; 29 height:auto; 30 max-width:100%; 31 max-height:100%; 32 display: block; 33 border: 0; 34 margin-bottom: 10px; 35} 36
html
1<script src="js/jquery-1.11.3.min.js"></script> 2<script > 3function slideSwitch() { 4 var $active = $('#slideshow p.active'); 5 if ( $active.length == 0 ) $active = $('#slideshow p:last'); 6 var $next = $active.next().length ? $active.next() 7 : $('#slideshow p:first'); 8 $active.addClass('last-active'); 9 $next.css({opacity: 0.0}) 10 .addClass('active') 11 .animate({opacity: 1.0}, 1000, function() { 12 $active.removeClass('active last-active'); 13 });} 14$(function() {setInterval( "slideSwitch()", 3000 );}); 15</script> 16<script > 17$(window).on('load resize', function(){ 18var w = $(window).width() *0.5; 19$('#slideshow').css('hight', w); 20}); 21</script> 22
###試したこと
###補足情報(言語/FW/ツール等のバージョンなど)
Jquery1.11.3を使用しています。
bootstrap3.3.7を使用しているためhead内に外部ファイルを置いています
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/01/18 01:20