Navigation bar with a full-page slider

Question

Navigation bar with a full-page slider

I am trying to incorporate my bootstrap nav bar into a full-width slider, similar to the layout in this example.

https://i.sstatic.net/LE9wP.jpg

This is the full width slider

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

Currently, I have positioned the nav bar at the top and added the slider code afterwards. However, the result is not what I expected.

https://i.sstatic.net/jxqCZ.png

When I remove the background color of the nav bar and try to make it transparent, nothing changes. How can I properly position the slider within the nav bar?

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

It seems like this is what you're looking for:

/*! http://mths.be/slideshow v1.0.0 by @mathias */ ;
(function($) {
  $.fn.slideshow = function(options) {
    options = $.extend({
      'timeout': 3000,
      'speed': 400 // 'normal'
    }, options);
    // Loop through selected elements to handle multiple slideshow calls
    return this.each(function() {
      var $elem = $(this); 
      $elem.children().eq(0).appendTo($elem).show(); 
      setInterval(function() { 
        $elem.children().eq(0)
          .hide().appendTo($elem)
          .fadeIn(options.speed) 
      }, options.timeout); 
    }); 
  }; 
}(jQuery)); 

// Initialize the slider

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

* {
  padding: 0;
  margin: 0;
}
.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>
<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://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>

Answer 2

It seems like this is what you're looking for:

/*! http://mths.be/slideshow v1.0.0 by @mathias */ ;
(function($) {
  $.fn.slideshow = function(options) {
    options = $.extend({
      'timeout': 3000,
      'speed': 400 // 'normal'
    }, options);
    // Loop through selected elements to handle multiple slideshow calls
    return this.each(function() {
      var $elem = $(this); 
      $elem.children().eq(0).appendTo($elem).show(); 
      setInterval(function() { 
        $elem.children().eq(0)
          .hide().appendTo($elem)
          .fadeIn(options.speed) 
      }, options.timeout); 
    }); 
  }; 
}(jQuery)); 

// Initialize the slider

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

* {
  padding: 0;
  margin: 0;
}
.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>
<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://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>

Navigation bar with a full-page slider

Answer №1

Similar questions

Tips for integrating TypeScript with Vue.js and Single File Components

A guide on accessing the first element in an array when performing multiplication within the Interval component in React.js

Unable to render data in Chart JS using PHP JSON

Adjusting the margins of jQuery mobile buttons

Ways to design siblings that are not currently being hovered over

Testing Angular 2: Ensuring Component Properly Calls Router with Accurate Arguments

Exploring methods for testing an HTML page that utilizes jQuery for DOM manipulations

Changing the background color of a table cell using PHP based on data retrieved from a database table

assign the loading screen image to a swf file

The width of the unordered list is not what I defined

Three.js - Optimizing and Handling Images - Best Practices

Creating a stylish flyout search box using CSS

Utilizing property validation in your codebase

Printing JSON data with multiple rows in HTML

How to effectively manage draggable items or remove draggable data properly

Leveraging Webpack for the exclusive creation of a vendor bundle

The Javascript function is designed to function exclusively with onclick events or setTimeout functions

The return value of a jQuery post request is consistently false

Firefox not responding to jQuery focus() function, but Chrome is executing it flawlessly

Only the first Yii ajax jQuery request is successful when multiple requests are made