导航栏和整页滑块答案

【问题标题】：Navibar and full page slider导航栏和整页滑块
【发布时间】：2016-09-01 21:06:48
【问题描述】：

我只是想将我的引导导航栏放在全宽滑块中，就像这样。

This is the full width slider

http://codepen.io/grovesdm/pen/MazqzQ

我已将导航栏放在顶部并在其后放置滑块代码。现在它看起来像这样。

如果我删除导航栏背景颜色并使该 div 透明，则什么也没有发生。如果我需要将滑块放在滑块内？

【问题讨论】：

为什么不给导航栏一个绝对位置top:0 left:0？
导航栏位于滑块的顶部，而不是其中。一个透明的导航栏只显示<body> 的背景或它所站立的任何东西
@jbrya029 这是滑块position: absolute; width: 100%; height: 100vh;的当前样式
@JohnSmith 你是对的。它显示身体背景颜色。我需要将滑块放在它后面。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我想你想要这个：

/*! http://mths.be/slideshow v1.0.0 by @mathias */ ;
(function($) {
  $.fn.slideshow = function(options) {
    options = $.extend({
      'timeout': 3000,
      'speed': 400 // 'normal'
    }, options);
    // We loop through the selected elements, in case the slideshow was called on more than one element e.g. `$('.foo, .bar').slideShow();`
    return this.each(function() {
      // Inside the setInterval() block, `this` references the window object instead of the slideshow container element, so we store it inside a var
      var $elem = $(this);
      $elem.children().eq(0).appendTo($elem).show();
      // Iterate through the slides
      setInterval(function() {
        $elem.children().eq(0)
          // Hide the current slide and append it to the end of the image stack
          .hide().appendTo($elem) // As of jQuery 1.3.2, .appendTo() returns the inserted element
          // Fade in the next slide
          .fadeIn(options.speed)
      }, options.timeout);
    });
  };
}(jQuery));

// Name the slider

$(function() {
  $('.slider').slideshow({
    timeout: 7000,
    speed: 1000
  });
});

* {
  padding: 0;
  margin: 0;
}
/*section {
  border: 10px solid green;
}

body {
  border: 10px solid orange;
}*/

.slider {
  position: relative;
  width: 100%;
  height: 100vh;
}
.slider li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  list-style: none;
}
.slider li .slide {
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
}
.slider li .slide figcaption {
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: white;
  text-shadow: 0 0 5px black;
  font-size: 60px;
  text-align: center;
  position: absolute;
  top: -30px;
  margin-top: 50vh;
  left: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<body>
<section>
  <nav class="navbar navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#about">About</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
              <li class="dropdown-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>
  </nav>

  
    <ul class="slider">
      <li>
        <figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/1d9326c2ae66befef4e39c3426adf17a.jpg)">
          <figcaption>hello</figcaption>
        </figure>
      </li>
      <li>
        <figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/______by_Thoum.jpg)">
          <figcaption>yeah</figcaption>
        </figure>
      </li>
      </li>
    </ul>
  </section>

  <p>Hello</p>
</body>

【讨论】：

是的。这是我想要的。谢谢！
很高兴知道它有帮助:)
但有一件事。导航远固定在顶部。但我现在不需要固定的导航栏。我该如何解决？
在<nav> 类中删除navbar-fixed-top。
我做到了。但它又变回了默认值。