全屏轮播图代码:Bootstrap轮播全屏

我试图让图像在引导轮播显示全屏,但还没有能够弄清楚,我一直在这个工作了一段时间,我完全卡住了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta cht="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 xxx="../assets/css/bootstrap.css" rel="stylesheet">
    <link xxx="../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 NBAR
    -------------------------------------------------- */
    /* 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  for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-: 0 2px 10px rgba(0,0,0,.25);
              box-: 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-: 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 on 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-: 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" xxx="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" xxx="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" xxx="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" xxx="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" xxx="../assets/ico/favicon.png">
  </head>
  <body>
    <!-- NBAR
    ================================================== -->
    <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. -->
            <on type="on" 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>
            </on>
            <a class="brand" xxx="#">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 xxx="#">Home</a></li>
                <li><a xxx="#about">About</a></li>
                <li><a xxx="fluid.html">Beta</a></li>
                <li><a xxx="#contact">Contact</a></li>
                <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
                <li class="dropdown">
                  <a xxx="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a xxx="#">Action</a></li>
                    <li><a xxx="#">Another action</a></li>
                    <li><a xxx="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a xxx="#">Separated link</a></li>
                    <li><a xxx="#">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" xxx="#">Sign up today</a>
            </div>
          </div>
        </div>
      </div>
      <!-- FOOTER -->
      <footer>
        <p>&copy; 2013 Company, Inc. &middot; <a xxx="#">Privacy</a> &middot; <a xxx="#">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-on.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>
81

更新引导程序 4

Bootstrap 4 具有utility cl,可以更轻松地创建全屏轮播。例如,在carousel-item内容上使用min-vh-100类...

<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>
Full screen carousel demo

这可以使轮播项目全屏显示,但是包含具有特定大小和 / 或宽高比的图像或视频的轮播项目需要进一步考虑。

由于视口 h / w 比可能与图像或视频 h / w 比不同,因此通常使用背景图像或object-fit将图像和视频调整为“全屏”。对于视频,请根据视频比例(21:9 、 19:9 等)的需要使用 Bootstrapresponsive embed cl

Full screen videos demo

另请参见:https://stackoverflow.com/a/58765043/171456

原始答案 (Bootstrap 3)

确保旋转木马项目内的 img 设置为高度和宽度 100 %。您还必须确保旋转木马和任何.item 容器(html,body)是 100 %...

html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
Boostrap 3 Full Screen Carousel Demo

是 Bootstrap 3.x 的示例:http://www.codeply.com/go/2tVXo3mAtV

5

这是我怎么做的。这使得幻灯片中的图像占据了全屏,如果它的宽高比允许的话,否则它就会缩小。

.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

我在 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>
Source
2

你可以做到这一点,而无需强制htmlbody给我 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 xxx="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googlea.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 adiicing</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" xxx="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" xxx="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(504)
Chao tong guang:html将未转义的字符呈现为转义(tracer tong)
上一篇
有趣的html代码源码:有趣的行为与 html段落标签(big funny paragraph)
下一篇

相关推荐

  • html hello world代码:Hello World

    Hello World代码如下:…

    2023-08-12 15:17:14
    0 14 73
  • html浏览器兼容代码:Hello World

    HTML浏览器兼容代码是指为了让不同的浏览器能够正常显示和支持网站内容,而编写的代码。具体来说,就是在编写 HTML 代码时,要遵循 W3C 标准,使用相应的代码规范,以确保网页在不同的浏览器中能够正常显示,从而达到浏览器兼容的目的。…

    2023-03-14 10:13:02
    0 94 95
  • html代码hr表示什么分割线

    示例示例HTML代码hr表示水平线,它可以用来将文档分割成不同的部分,以提高页面的可读性。下面是一个hr标签的示例代码:…

    2023-05-01 14:39:41
    0 70 64
  • php格式化html:Hello World!

    PHP格式化HTML的主要目的是使HTML更易读,更容易维护和编辑。它可以帮助你更容易地找到HTML中的错误,并使代码更具可读性。…

    2023-04-16 06:41:22
    0 42 43
  • html外部样式:Hello World

    html外部样式指的是在HTML文件中使用外部CSS文件来定义样式。在HTML文件中,可以通过标签将外部CSS文件引入,然后在CSS文件中定义样式。…

    2023-06-12 12:33:26
    0 11 96
  • markdown嵌入html代码:标题

    Markdown嵌入HTML代码是指在Markdown文件中使用HTML标签来实现更丰富的文本效果,它可以帮助我们更好地表达我们的想法。…

    2023-06-28 02:35:54
    0 59 25
  • php接收post请求:为hello world的html页面 Hello World

    示例示例PHP接收POST请求的方式有两种:使用$_POST变量…

    2023-02-05 06:47:41
    0 87 76
  • html弹出窗口代码:为“你好!”的弹出窗口alert(你好!);

    html弹出窗口代码是一种使用JavaScript来创建弹出窗口的技术。它可以让你在网页上显示一个可以提供更多信息的小窗口,而不会影响原来的网页内容。下面是一个简单的html弹出窗口代码示例:…

    2023-09-12 03:43:20
    0 90 13

发表评论

登录 后才能评论

评论列表(8条)