web-dev-qa-db-ja.com

Bootstrapカルーセル全画面

bootstrapカルーセルの画像を取得してフルスクリーンを表示しようとしていますが、それを把握することができませんでした。現在、画像は1つしかありませんが、機能したらさらに追加します...

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Carousel Template &middot; Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
    <style>

    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      color: #5a5a5a;
      height: 100%;
      width: 100%;
      min-height: 100%;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
    }
    .navbar-wrapper .navbar {

    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 0px;
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel .item {
      height: 100%;
    }

    .carousel-inner {
      overflow:hidden;
      width: 100%;
      min-height: 100%;
      position:relative;
    }

    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      min-height: 100%;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 200px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }


    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel img {
        width: auto;
        height: 500px;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }

    }
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="Apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/Apple-touch-icon-144-precomposed.png">
    <link rel="Apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/Apple-touch-icon-114-precomposed.png">
      <link rel="Apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/Apple-touch-icon-72-precomposed.png">
                    <link rel="Apple-touch-icon-precomposed" href="../assets/ico/Apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>

  <body>



    <!-- NAVBAR
    ================================================== -->
    <div class="navbar-wrapper">
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
      <div class="container">

        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Treyca</a>
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
            <div class="nav-collapse collapse">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="fluid.html">Beta</a></li>
                <li><a href="#contact">Contact</a></li>
                <!-- Read about Bootstrap dropdowns at http://Twitter.github.com/bootstrap/javascript.html#dropdowns -->
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!--/.nav-collapse -->
          </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->

      </div> <!-- /.container -->
    </div><!-- /.navbar-wrapper -->



    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active">
          <img src="../assets/img/examples/Bar-1.jpg" alt="">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>
          </div>
        </div>
      </div>
      <!-- FOOTER -->
      <footer>
        <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
      </footer>
    </div><!-- /.carousel -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>
    <script>
      !function ($) {
        $(function(){
          // carousel demo
          $('#myCarousel').carousel()
        })
      }(window.jQuery)
    </script>
    <script src="../assets/js/holder/holder.js"></script>

    <style>
        body {
                background-color: black;
                color: #FFFFFF;
            }
    </style>
  </body>
</html>
twitter-bootstrapcarousel
45
Tyler B. Wear

Update Bootstrap 4

ブートストラップ4には ユーティリティクラス があり、フルスクリーンのカルーセルを簡単に作成できます。たとえば、min-vh-100コンテンツでcarousel-itemクラスを使用します...

<div class="carousel slide" data-ride="carousel">
      <div class="carousel-inner bg-info" role="listbox">
            <div class="carousel-item active">
                <div class="d-flex align-items-center justify-content-center min-vh-100">
                    <h1 class="display-1">ONE</h1>
                </div>
            </div>
      </div>
</div>

フルスクリーンカルーセルデモ

これは、カルーセル項目をフルスクリーンにするために機能しますが、特定のサイズとアスペクト比を持つ画像またはビデオを含むカルーセル項目はさらに考慮する必要があります。

ビューポートのh/w比は画像またはビデオのh/w比とは異なる可能性が高いため、通常、背景画像またはobject-fitを使用して画像やビデオを「フルスクリーン」にサイズ変更します。ビデオの場合は、ビデオ比（21：9、19：9など）の必要に応じてBootstrap レスポンシブ埋め込みクラス を使用します。

フルスクリーン動画デモ

元の回答（ブートストラップ3）

カルーセルアイテム内のimgが高さと幅に100％に設定されていることを確認してください。また、カルーセルと.itemコンテナ（html、body）が100％であることを確認する必要があります...

html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}

Boostrap 3フルスクリーンカルーセルデモ

Bootstrap 3.xの例を次に示します。 http://www.codeply.com/go/2tVXo3mAtV

68
Zim

ほとんどすべてのbootstrapプロジェクトで全幅スライダーを使用しています。私のアプローチは次のとおりです。

1）カルーセルをカスタムの全幅コンテナにラップします（.containerクラスの外側）
2）画像スライドとそのコンテナの幅を100％に設定します
3）必要に応じてスライダーの高さを設定します

そして、それはこのようになります：

<section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://lorempixel.com/1024/750" alt="Slide1" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide2" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide3" />
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
</section>

CSSは次のようになります。

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 600px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}
16
heyallan

これが私がやった方法です。これにより、スライドショーの画像がアスペクト比で許可されている場合は全画面表示され、その他の場合は縮小されます。

.carousel {
    height: 100vh;
    width: 100%;
    overflow:hidden;
}
.carousel .carousel-inner {
    height:100%;    
}

画面の縦横比に関係なく、常にフルスクリーンのスライドショーを取得するには、object-fitを使用することもできます（IEまたはEdgeでは機能しません）

.carousel .carousel-inner img {
    display:block;
    object-fit: cover;
}
3
Turbojohan

Startbootstrap.comで答えを見つけました。このコードを試してください：

CSS

html,
body {
    height: 100%;
}

.carousel,
.item,
.active {
    height: 100%;
}


.carousel-inner {
    height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

footer {
    margin: 50px 0;
}

HTML

   <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
            <div class="carousel-caption">
                <h2>Caption 1</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

ソース

2
Eric Watson

htmlおよびbodyを強制的に高さ100％にせずにそれを行うことができます。代わりにビューポートの高さを使用してください。そして、マウスホイールコントロールも使用します。

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

var slider = document.getElementById("demo");
var onScroll = debounce(function(direction) {
  //console.log(direction);
  if (direction == false) {
        $('.carousel-control-next').click();
  } else {
        $('.carousel-control-prev').click();
  }
}, 100, true);

slider.addEventListener("wheel", function(e) {
  e.preventDefault();
  var delta;
  if (event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * event.deltaY;
  }

  onScroll(delta >= 0);
});
.carousel-item {
  height: 100vh;
  background: #212121;
}

.carousel-control-next,
.carousel-control-prev {
  width: 8% !important;
}

.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.carousel-item h1 {
    color: #fff;
    font-size: 72px;
    padding: 0 10%;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>


<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
    </div>
    <div class="carousel-item">
      <h1 class="display-1 text-center">Inventore omnis odio, dolore culpa atque?</h1>
    </div>
    <div class="carousel-item">
     <h1 class="display-1 text-center">Lorem ipsum dolor sit</h1>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>
1
Razvan Zamfir

私は同じ問題を抱えていて、上記の答えを試しましたが、もっと薄いものを望んでいたので、1つずつ意見を変えて、追加するだけでよいことを発見しました

.carousel {
  height: 100%;
}
0
Comics Dealer