カルーセルの中の画像が正しく表示されないです。
http://black-flag.net/jquery/20120111-3643.html を参考にして作っています。
htmlに
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="home.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <div class="menu" id="menu"> <h2 class="title first">SITE</h2> <ul class=""> <li><a class="home" href="">Home</a> </li> <li><a class="profile" href="">Detail</a> </li> </ul> </div> <script src="carousel.js"></script> <div class="imgArea float-right" id="carousel"> <ul> <li><a href="#"><img src="photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="photo2.jpg" alt="" /></a></li> </ul> </div> <script src="carousel.js"></script> </body> </html>
と書きcssに
*{ margin: 0; padding: 0; } .menu{ background-color: gray; width: 500px; height: 100%; float: left; } .title{ color:white; font-size:30px; margin: 0px 5px; margin-left: 40px; text-align: center; } .first{ padding-top:30px; } html, body, .menu { height: 100%; } body { margin: 0; } .relative { position: relative; } li{ list-style: none; } li a{ display: block; text-decoration: none; color: white; text-align: center; font-size: 20px; } li a img{ width: 100%; height: 100%; } .float-right { width: calc(100% - 500px); overflow: hidden; float: right; }
と書いたら、
の黄色で示した矢印の部分のように本来の画像より大分大きく(そもそも画像の原型もなく)カルーセルになってしまいます。
あなたの回答
tips
プレビュー