いつもお世話になっております。
bootstrapでカルーセルインナーの中に画像を入れて
スライドショーを作っています。
画像を画面幅いっぱいに広げたいのですがうまくいきません。。
ご教示いただけたら幸いです。
参考サイト
https://www.youtube.com/watch?v=9cKsq14Kfsw&feature=youtu.be
https://cccabinet.jpn.org/bootstrap4/components/carousel
html
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 10 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 11 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 12 13 <title>Responsive Bootstrap Website Start To Finish with Bootstrap</title> 14 </head> 15 <body> 16 <header> 17 <nav class="navbar navbar-expand-md navbar-light bg-light"> 18 <a class="navbar-brand" href="#"><img src="./img/logo.png"></a> 19 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Navber" aria-controls="Navber" aria-expanded="false" aria-label="ナビゲーションの切替"> 20 <span class="navbar-toggler-icon"></span> 21 </button> 22 <div class="collapse navbar-collapse navbar-right " id="Navber"> 23 <ul class="navbar-nav ml-auto"> 24 <li class="navbar-item"> 25 <a class="nav-link" href="#" >Home</a> 26 </li> 27 <li class="navbar-item"> 28 <a class="nav-link" href="#">About</a> 29 </li> 30 <li class="navbar-item"> 31 <a class="nav-link" href="#">Service</a> 32 </li> 33 <li class="navbar-item"> 34 <a class="nav-link" href="#">Team</a> 35 </li> 36 <li class="navbar-item"> 37 <a class="nav-link" href="#">Contact</a> 38 </li> 39 </ul> 40 </div> 41 </nav> 42 </header> 43 <div id="slide" class="carousel slide" date-ride="carousel"> 44 <ol class="carousel-indicators"> 45 <li data-target="#slide" data-slide-to="0" class="active"></li> 46 <li data-target="#slide" data-slide-to="1"></li> 47 <li data-target="#slide" data-slide-to="2"></li> 48 </ol> 49 <div class="carousel-inner"> 50 <div class="carousel-item active"> 51 <img src="./img/background.png" alt=""> 52 <div class="carousel-caption"> 53 <h1 class="display-2">Bootstrap</h1> 54 <h2>Compleat Website Layout</h2> 55 <button type="button" class="btn btn-outline-light btn-lg">View Demo</button> 56 <button type="button" class="btn btn-primary btn-lg">Get Started</button> 57 </div> 58 </div> 59 <div class="carousel-item"> 60 <img src="./img/background2.png" alt=""> 61 </div> 62 <div class="carousel-item"> 63 <img src="./img/background3.png" alt=""> 64 </div> 65 </div> 66 </div> 67 68 69 <!-- Optional JavaScript --> 70 <!-- jQuery first, then Popper.js, then Bootstrap JS --> 71 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 72 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 73 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 74 </body> 75</html> 76
CSS
1@import url(http://fonts.googleapis.com/css?family=Poppins:400,500,700); 2 3@media (max-width: 992px) { 4} 5@media (max-width: 768px) { 6} 7@media (max-width: 576px) { 8} 9 10 11.carousel-item{ 12 background-size: cover; 13 /* transition: -webkit-transform 0.5s ease; 14 transition: transform 0.5s ease; 15 transition: transform,-webkit-transfrom 0.5s ease; 16 -webkit-backface-visibility-:visible; 17 backface-visibility: :visible; */ 18} 19 20/*---fixed background-image---*/ 21figure{ 22 position: relative; 23 width: 100%; 24 height: 60%; 25 margin: 0 !important; 26} 27
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/23 12:33