html - 每个设备上的 Bootstrap 轮播全屏

Question

所以我想要一个轮播，它应该占据显示器的整个高度和宽度，然后向下滚动。喜欢this , 并且里面的图像应该在保持比例的同时填充它的父级。问题是要么我必须提供固定高度，要么它将占用最大图像的高度。那么如何为每台设备制作全屏轮播。

$(document).ready(function() {
  $("#my-slider").carousel({
    interval : 3000,
    pause: false
  });
})

.container-fluid {
  padding-right: 0px;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row" style="margin-right:0px; margin-left:0px;">
    <div class="col-sm-12" style="padding:0px;">
      <div id="my-slider" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="img/image1.jpg"/>
          </div>
          <div class="item">
            <img src="img/image2.jpg"/>
          </div>
          <div class="item">
            <img src="img/image3.jpg"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container" style="margin-top:20px;">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-xs-12">
      <div class="thumbnail" style="border:none; background:white;">
        <div class="col-sm-4 col-md-4 col-xs-12 image-container">
          <center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
        </div>
        <div class="col-sm-8 col-md-8 col-xs-12">  
          <h2>Sample heading</h2>
          <p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-12 col-xs-12">
      <div class="thumbnail" style="border:none; background:white;">
        <div class="col-sm-4 col-md-4 col-sm-push-8 col-xs-12 image-container">
          <center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
        </div>
        <div class="col-sm-8 col-md-8 col-sm-pull-4 col-xs-12">
          <h2>Sample heading</h2>
          <p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-12 col-xs-12">
      <div class="thumbnail" style="border:none; background:white;">
        <div class="col-sm-4 col-md-4 col-xs-12 image-container">
          <center><img src="img/image4.jpg" style="height:200px;" class="img-responsive" /></center>
        </div>
        <div class="col-sm-8 col-md-8 col-xs-12">  
          <h2>Sample heading</h2>
          <p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Contact Us</h2>
      <form action="" method="" class="form-horizontal">
        <div class="form-group">
          <label for="name" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <input id ="name" type="name" name="" class="form-control">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email Address</label>
          <div class="col-sm-10">
            <input id ="email" type="email" name="" class="form-control"></div>
        </div>
        <div class="form-group">
          <label for="message" class="col-sm-2 control-label">Message</label>
          <div class="col-sm-10">
            <input id ="message" type="message" name="" class="form-control"></div>
        </div>
        <div class="form-group">
          <div class="col-sm-10 col-sm-push-2">
            <input id ="submit" type="submit" name="" class="btn btn-default"/>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

你必须为此使用 jquery，因为当你的网站加载时你需要获取视口(viewport)的 height 和 width。然后将该 height 和 width 应用到您的 carosel。

使用此代码并为自己更改 carosel 类。

$(function(){
   var height = $(window).height();
   var width = $(window).width();
   $(".yourCarosel").css(
      {
       "height":height, 
       "width":width
      });
});

它会自动获取窗口的高度和宽度并将其应用于carosel。