Jqueryでｃｓｓの高さをウィンドウ幅に合わせて自動で変更されるようにしたい

Question

ID slideshowのhightをウィンドウサイズに合わせてフレキシブルに変わるようにしたいのですがうまくいきません。
CSSで#slideshowをposition:relativeにし、含む子要素を全てposition:absoluteにしているため#slideshowは高さを数値で設定しなければいけない状態となっています。しかしレスポンシブルにしたいためJqueryにて調整を試みている次第です。
※jquery初心者のためとんちんかんな記述かもしれませんが、上記部部分の他にも改善点ありましたらお教えいただけると幸いです。

###発生している問題・エラーメッセージ

エラーメッセージは表示されないのですが、記述内容も反映されない状態です。

###該当のソースコード

    <div id="slideshow">
   <p class="active">
      <a href="リンク先"><img src="images/photo1.jpg" alt="画像1"></a>
      キャプション1
   </p>
   <p>
      <a href="リンク先"><img src="images/photo2.jpg" alt="画像2"></a>
      キャプション2
   </p>
   <p>
      <a href="リンク先"><img src="images/photo3.jpg" alt="画像3"></a>
      キャプション3
   </p>
</div> 

#slideshow {
   position: relative;
   width:  100%; 
   height: 500px; 
}

#slideshow p {
   position: absolute;
   top:  0;
   left: 0;
   z-index: 8;
   opacity: 0.0;
   margin: 0;
   background-color:#000; 
   height: 100%; 
}

#slideshow p.active {
   z-index: 10;
   opacity: 1.0;
}

#slideshow p.last-active {
   z-index: 9;
}

#slideshow p img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
   display: block;
   border: 0;
   margin-bottom: 10px; 
}

<script src="js/jquery-1.11.3.min.js"></script> 
<script >
function slideSwitch() {
   var $active = $('#slideshow p.active');
   if ( $active.length == 0 ) $active = $('#slideshow p:last');
   var $next =  $active.next().length ? $active.next()
      : $('#slideshow p:first');
   $active.addClass('last-active');
   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
         $active.removeClass('active last-active');
         });}
$(function() {setInterval( "slideSwitch()", 3000 );});
</script>
<script >
$(window).on('load resize', function(){
var w = $(window).width() *0.5;
$('#slideshow').css('hight', w);
});
</script>

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
Jquery1.11.3を使用しています。
bootstrap3.3.7を使用しているためhead内に外部ファイルを置いています

Answer 1

ミススペルがあったぐらいで、特に大きな問題はありません。

修正

失礼しました。幅に応じて高さでしたね。

$(function() {
	function slideSwitch() {
		var $active = $('#slideshow p.active');
		if ($active.length == 0)
			$active = $('#slideshow p:last');

		var $next = $active.next().length ? $active.next()
				: $('#slideshow p:first');

		$active.addClass('last-active');

		$next.css({
			opacity : 0.0
		})
		.addClass('active')
		.animate({
			opacity : 1.0
		}, 1000, function() {
				$active.removeClass('active last-active');
			}
		);
	}

	setInterval(slideSwitch, 3000);

	$(window).on('load resize', function() {
		var height = $(window).width() * 0.5;
		$('#slideshow').css('height', height);
	});
});

Comments

[退会済みユーザー]

ご回答ありがとうございます。
まねして記述してみたのですがなぜかうまく動きません・・・
そのままコピペするとちゃんと動きます。
まじまじと読んで、いじっているのですが・・・・なんとも
初心者すぎてほんとお恥ずかしいのですが。
何が原因だったのかおおしえいただけませんか
宜しくお願い致します。

Answer 2

参考になるかわからないですが、ソースあげときます。
※ 認識も合っているかご確認くださいー。

   <div id="slideshow">
   <p class="active">
      <a href="リンク先"><img src="https://dummyimage.com/600x400/333/fff" alt="画像1">キャプション1</a>
   </p>
   <p>
      <a href="リンク先"><img src="https://dummyimage.com/600x400/0ff/fff" alt="画像2">キャプション2</a>
   </p>
   <p>
      <a href="リンク先"><img src="https://dummyimage.com/600x400/0f0/fff" alt="画像3">キャプション3</a>
   </p>
</div> 

#slideshow {
   position: relative;
   width:  100%; 
   height: 500px; 
}

#slideshow p {
   position: absolute;
   top:  0;
   left: 0;
   z-index: 8;
   opacity: 0.0;
   margin: 0;
   background-color:#000; 
   height: 100%; 
}

#slideshow p.active {
   z-index: 10;
   opacity: 1.0;
}

#slideshow p.last-active {
   z-index: 9;
}

#slideshow p img {
   max-height:100%;
   width: 100%;
   display: block;
   border: 0;
   margin-bottom: 10px; 
}

#slideshow p a{
  color: #333;
  text-decoration:none;
}

#slideshow p a{
  opacity: 0;
}

#slideshow p.active a{
  opacity: 1;
}

function slideSwitch() {
   var $active = $('#slideshow p.active');
   var $next =  $active.next().length ? $active.next() : $('#slideshow p:first');
   $active.addClass('last-active');
   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
         $active.removeClass('active last-active');
});}

//初期表示
var slideSize = function(){
    var w = $(window).width() *0.5;
    $('#slideshow').css({"height": w});
};

//初期サイズ
slideSize();

//タイマー
loopSlideTimer = setInterval(function() {
  slideSwitch();
}, 3000);

//リサイズ処理
var currentWidth = window.innerWidth;
window.addEventListener("resize", function() {
    if (currentWidth == window.innerWidth) {
        // ウインドウ横幅が変わっていないため処理をキャンセル。
        return;
    }
    // ウインドウ横幅が変わったのでリサイズと見なす。
    // 横幅を更新
    slideSize();
    // ※ リサイズ時にタイマーをとめたい場合はコメントを外す
    //clearInterval(loopSlideTimer);
});

Comments

[退会済みユーザー]

丁寧なご回答ありがとうございます。私もはやくこんなにわかるようになりたいです。本当に憧れます。勉強します。
初心者すぎて本当にお恥ずかしいのですが、
もしよろしければ以下２つをおおしえいただけませんか？
①function slideSwitch()のif文の内容は、$activeのもつ要素の数が０の時
$activeに $('#slideshow p:last')を代入するという解釈で合っていますか？
②function slideSwitch() の var $next = $active.next().length ? $active.next() : $('#slideshow p:first');
は＄nexが$active.next().lengthの時trueなら$active.next() ,falseなら$('#slideshow p:first')を変数として定義する？？よくわからなくなってきました・・・正しい解釈をお教えいただけませんか？

調べ方がわるいのか、内容がちゃんと理解できず、独学しかないので聞ける相手もおらず・・・恐縮ですが宜しくお願い致します。

[退会済みユーザー]

変な質問をしてしまいました！！！すみません。
自分で記述していた部分でした・・・
どこそこのをなにも考えずにマネしたので内容をりかいできていません・・・

[takumaro_web]

①その認識であっていますがそのif文は機能していないです。
マークアップ上で先頭のものに<p class="active">とされているので
$active.length == 0（存在しているので）になることはないです。

まるまる削除でよいかと...（回答を編集しておきます。）

②$nextが$active.next().lengthの時trueなら$active.next() ,falseなら$('#slideshow p:first')を変数として定義する？？

$nextが...ではなく、
「$nextは... 式1 または 式2として定義する」が正解です。

以下の条件式で$nextの値を判定させています。
$active.next().length （＝ 次のスライドの数はいくつ？）

返り値：1の場合（次のスライドが存在する場合）：$next は $active.next() （＝ 次のスライドへ）
返り値：0の場合（次のスライドがない場合）：$next は $('#slideshow p:first') （＝ スライドの先頭へ）

つまり、
スライドショーを実行して最後のスライドにきた時に1枚目に戻るための処理といえます。

[退会済みユーザー]

成るほど！！！
ありがとうございます。細かく説明頂いて恐縮です。
解決しそうです！ありがとうございます。