Skip to main content
complementada información
Origen Enlace
Arngue
  • 569
  • 3
  • 10

A parte te comento que para hacer que un elemento ocupe el 100% de la página sin margenes ni padding, no debes de usar ni .container ni .row ni .col dado que todos estos elementos de bootstrap añaden por defecto margenes y paddings y por ende deberías de sobreescribir susodichas clases, en tu caso tan solo tienes que dejar de usar la clase .container.

Siempre puedes usar la consola de los navegadores para ver que css se esta aplicando para cada elemento y ver de que clase css proviene. Se abre con F12 o Ctrl+Shift+C || Ctrl+Mayús+C

A parte te comento que para hacer que un elemento ocupe el 100% de la página sin margenes ni padding, no debes de usar ni .container ni .row ni .col dado que todos estos elementos de bootstrap añaden por defecto margenes y paddings y por ende deberías de sobreescribir susodichas clases, en tu caso tan solo tienes que dejar de usar la clase .container.

Siempre puedes usar la consola de los navegadores para ver que css se esta aplicando para cada elemento y ver de que clase css proviene. Se abre con F12 o Ctrl+Shift+C || Ctrl+Mayús+C

Origen Enlace
Arngue
  • 569
  • 3
  • 10

para lograr eso tienes que realizar 2 tareas sencillas

1 - Esconder por defecto el header (navbar)

2 - Detectar el scroll de la pagina con js para mostrar/ocultar el header

Esta es la pequeña funcion JS que detecta la posicion del scroll y muestra/esconde el header

<script type="text/javascript">
        var BodyScroll = function () {
            if($(document).scrollTop() != 0)
                $("#header").css("display","block");
            else
                $("#header").css("display","none");
        }
</script>

Tambien te he comentado en el css que es mejor usar el background de un elemento que un elemento img para los carrousel, pero ambas funcionan igual de bien, eso depende de como quieras usar tu plantilla y en que entorno se encuentra.

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);

body, html {
width: 100%;
height: 100%;
}

body {
  background: #fff;
  font-family:'Open Sans', Arial, sans-serif;
  color:#333;
  line-height:1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:500; 
font-family:'Open Sans', Arial, sans-serif;
color:#333;
}

h1{
  font-size: 36px;
  color:#fff;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 16px;
  color: #787878;
  font-weight: 400;
  line-height: 24px;
}

/*Tienes que indicar una altura fija para que al cambiar de imagen el carrousel no se dimensione*/
.carousel-inner{
height: 500px;
}

/*Para centrar las imagenes en el carrousel como imagenes que ocupan el 100% de la pagina, debes de sobreescribir la clase img-responsive de bootstrap*/
.carousel-inner .item img {
width: 100% !important;
height: 500px !important;/*Misma altura que carousel-inner*/
}

/* Yo te recomiendo que antes que usar el elemento img, uses un div y le pongas background-image: url(http://xxx); bacground-position: center; bacground-repeat: no-repeat; background-size: cover; */


/*Esconder header por defecto*/
#header {
display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gp Bootstrap Template</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- Para usar bootstrap debes de usar jquery-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<!-- Hay que detectar el scroll del body y mostrar/esconder el #header segun la posicion del scroll -->
<script type="text/javascript">
    var BodyScroll = function () {
        if($(document).scrollTop() != 0)
            $("#header").css("display","block");
        else
            $("#header").css("display","none");
    }
</script>
</head>

<body class="homepage" onscroll="BodyScroll()">
  

  <div class="slider">
<div class=""><!-- Container te añade una mida fija y los margenes, por eso tus probleams-->
  <div id="about-slider">
    <div id="carousel-slider" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators visible-xs">
        <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-slider" data-slide-to="1"></li>
        <li data-target="#carousel-slider" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner">
        <div class="item active">
          <img src= "https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5OS83NTgvb3JpZ2luYWwvc3RhcnMtdW5pdmVyc2UuanBn" class="img-responsive" alt="">
        </div>
        <div class="item">
          <img src= "http://blogs.discovermagazine.com/crux/files/2017/06/universe.jpg" class="img-responsive" alt="">
        </div>
        <div class="item">
          <img src= "https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2017/neutrinofaci.jpg" class="img-responsive" alt="">
        </div>
      </div>

      <a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>

      <a class=" right carousel-control hidden-xs" href="#carousel-slider" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
    </div>
    <!--/#carousel-slider-->
  </div>
  <!--/#about-slider-->
</div>
  </div>
  <header id="header">
<nav class="navbar navbar-fixed-top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <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="index.html">Gp.</a>
    </div>

    <div class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about-us.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact-us.html">Contact</a></li>
      </ul>
    </div>
  </div>
  <!--/.container-->
</nav>
<!--/nav-->

  </header>
  <!--/header-->
  <!-- añadir height a la pagina para probar scroll -->
  <div style="height: 2000px">
  </div>
  </body>
  </html>