<div id="slideshow" class="slideshow slideshow_pc"> <img class="pc" src="images/youkoso_pc.jpg" alt=""> <img class="pc" src="images/through_pc.jpg" alt=""> <img class="pc" src="images/enjoy_pc.jpg" alt=""> </div> <div id="slideshow" class="slideshow slideshow_sp"> <img class="sp" src="images/youkoso.jpg" alt=""> <img class="sp" src="images/through.jpg" alt=""> <img class="sp" src="images/enjoy.jpg" alt=""> </div> <style> .slideshow { clear: both; position: relative; width:750px; height:500px; margin: 0 auto; } .pc{ display: block !important; } .sp{ display: none !important; } .slideshow img { position: absolute; left: 0; top: 0; opacity: 0; transition: 1s; } @media screen and (max-width:768px){ .slideshow{ clear: both; width:100%; height:250px; position: relative; } .slideshow img{ width:100%; height:auto; } .pc{ display: none !important; } .sp{ display: block !important; z-index: 10; position: absolute; top:0; left:0; } } .slideshow .show { opacity: 1; z-index: 1; } </style> <script> $(window).load(function() { var img = $("#slideshow").children("img"), num = img.length, count = 0, interval = 5000; img.eq(0).addClass("show"); setTimeout(slide, interval); function slide() { img.eq(count).removeClass("show"); count++; if(count >= num) { count = 0; } img.eq(count).addClass("show"); setTimeout(slide, interval); } }); </script> コード ```###前提・実現したいこと ウェブページのスライドショーを作成している段階なのですが、 スライドショーに使われる画像をデバイスの画面サイズによって切り替えたいと思っております。 以上のコードだと スマホで見せたい画像がスマホの画面になっても表示されません。 ###発生している問題・エラーメッセージ
エラーメッセージ
###該当のソースコード ```ここに言語を入力 ここにご自身が実行したソースコードを書いてください
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。