Q&A
###前提・実現したいこと
Bootstrapにcamera slideshowを設定したらスマフォサイズでハンバーガーメニューが表示されなくなった。アイコンは表示されるが、メニューバーが表示されない。
どなたか原因が分かる方いらっしゃいますか？
###発生している問題・エラーメッセージ
slideshowを設置したトップページだけ上記の表情が発生。
###該当のソースコード
<body id="pageTop"> <div id="fb-root"></div> <header class="header"> <div class="container"> <div class="row"> <h1 class="site-logo col-xs-9 col-sm-6 col-md-8"> </h1> <div class="col-sm-6 col-md-4"> <ul class="sub-nav list-inline pull-right"> <li><a href="sitemap.html">サイトマップ</a></li> <li><a href="policy.html">プライバシーポリシー</a></li> </ul> <form class="navbar-form pull-right" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="サイト内検索"> <span class="input-group-btn"><button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </form> </div> <div class="col-xs-3 nav-toggle"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-label="メニュー"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <nav class="navbar navbar-inverse"> <div class="container"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="index.html">HOME</a></li> <li><a href="bath/bath.html">お風呂</a></li> <li><a href="rest/rest.html">お食事</a></li> <li><a href="relax/relax.html">お休み処</a></li> <li><a href="around/footbath.html">足湯</a></li> <li><a href="access/access.html">アクセス</a></li> <li><a href="mail/mail.html">お問合せ</a></li> </ul> </div> </div> </nav> </header> <!--ここからスライドショー--> <div class="fluid_container"><style> .fluid_container { margin: 0 auto; max-width: 1280px; width: 100%; } </style> <!--/////////////////////////////////////////////////////////////////////////////////////////////////// // // Scripts // ///////////////////////////////////////////////////////////////////////////////////////////////////--> <script type='text/javascript' src='scripts/jquery.min.js'></script> <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script> <script type='text/javascript' src='scripts/camera.min.js'></script> <script> jQuery(function(){ jQuery('#camera_wrap_test').camera({ height: '50%', }); }); </script>
</div> <!--ここまでスライドショー--><div class="camera_wrap camera_chocolate_skin" id="camera_wrap_test"> <div data-src="images/slides/topSlideFuji.jpg"></div> <div data-src="images/image_2.jpg"></div> <div data-src="images/image_3.jpg"><div class="camera_caption">The text of your caption</div></div> </div>
回答1件
0
以下のように行ってはいかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/css/camera.min.css"> 8 <style> 9 .fluid_container { 10 margin: 0 auto; 11 max-width: 1280px; 12 width: 100%; 13 } 14 </style> 15</head> 16<body id="pageTop"> 17<header class="header"> 18 <div class="container"> 19 <div class="row"> 20 <h1 class="site-logo col-xs-9 col-sm-6 col-md-8"> </h1> 21 <div class="col-sm-6 col-md-4"> 22 <ul class="sub-nav list-inline pull-right"> 23 <li><a href="sitemap.html">サイトマップ</a></li> 24 <li><a href="policy.html">プライバシーポリシー</a></li> 25 </ul> 26 <form class="navbar-form pull-right" role="search"> 27 <div class="input-group"> 28 <input type="text" class="form-control" placeholder="サイト内検索"> 29 <span class="input-group-btn"> 30 <button class="btn btn-default" type="button"> 31 <span class="glyphicon glyphicon-search"></span> 32 </button> 33 </span> 34 </div> 35 </form> 36 </div> 37 </div> 38 </div> 39 <nav class="navbar navbar-inverse"> 40 <div class="container-fluid"> 41 <div class="navbar-header"> 42 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 43 data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-label="メニュー"> 44 <span class="sr-only">Toggle navigation</span> 45 <span class="icon-bar"></span> 46 <span class="icon-bar"></span> 47 <span class="icon-bar"></span> 48 </button> 49 </div> 50 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 51 <ul class="nav navbar-nav"> 52 <li><a href="index.html">HOME</a></li> 53 <li><a href="bath/bath.html">お風呂</a></li> 54 <li><a href="rest/rest.html">お食事</a></li> 55 <li><a href="relax/relax.html">お休み処</a></li> 56 <li><a href="around/footbath.html">足湯</a></li> 57 <li><a href="access/access.html">アクセス</a></li> 58 <li><a href="mail/mail.html">お問合せ</a></li> 59 </ul> 60 </div> 61 </div> 62 </nav> 63</header> 64<!--ここからスライドショー--> 65<div class="fluid_container"> 66 <div class="camera_wrap camera_chocolate_skin" id="camera_wrap_test"> 67 <div data-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/slides/topSlideFuji.jpg"></div> 68 <div data-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/image_2.jpg"></div> 69 <div data-src="https://placehold.jp/3d4070/ffffff/150x150.png?text=images/image_3.jpg"> 70 <div class="camera_caption">The text of your caption</div> 71 </div> 72 </div> 73</div> 74<!--ここまでスライドショー--> 75<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 76<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script> 77<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 78<script src="https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/jquery.mobile.customized.min.js"></script> 79<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> 80<script src="https://cdnjs.cloudflare.com/ajax/libs/Camera/1.3.4/scripts/camera.min.js"></script> 81<script> 82 jQuery(function () { 83 jQuery("#camera_wrap_test").camera({ 84 height: "50%", 85 }); 86 }); 87</script> 88</body> 89</html>
投稿2017/09/30 06:43
編集2017/09/30 07:08
総合スコア14731
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。