as a tool to leave a FULL SCREEN slide

Asked

Viewed 1,453 times

3

how do I leave a Carousel on bootstrap full screen for mobile devices because on the desktop it stays the way I want occupying the whole screen without leaving white space on the devices it does not stay this way I would like to know if it has as:

<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel">
            <!-- Indicators -->
              <!--<ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>-->

              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="images/slide1.jpg" width="100%" height="100%" alt="...">
                </div>
                <div class="item">
                  <img src="images/slide2.jpg" width="100%" height="100%" alt="...">
                </div>
                <div class="item">
                  <img src="images/slide3.jpg" width="100%" height="100%" alt="...">
                </div>
              </div>

Edited whole html fixed:

    <!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Eduardo Gonçalves Fotografia</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">-->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/responsive.css">
        <style type="text/css">
        body{overflow-y: hidden; overflow-x: hidden; height: 100%;}
        </style>
    </head>
    <body>
    <div class="container-fluid full">
        <div class="row">
            <div class="cor">
                <div class="col-md-12 col-xs-12">
                    <ul class="nav nav-pills nav-justified">
                      <li role="presentation" class="active"><a href="index.html">Home</a></li>
                      <li role="presentation"><a href="#">O Fotógrafo</a></li>
                      <li role="presentation"><a href="#">Portfolio</a></li>
                      <li role="presentation"><a href="#">Últimos Eventos</a></li>
                      <li role="presentation"><a href="#">Área do Cliente</a></li>
                      <li role="presentation"><a href="#">Contato</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row full">
            <div id="carousel-example-generic" class="carousel slide carousel-fade full" data-ride="carousel">
            <!-- Indicators -->
              <!--<ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
              </ol>-->

              <!-- Wrapper for slides -->
              <div class="carousel-inner full" role="listbox">
                <div class="item active full">
                  <img src="images/slide1.jpg" width="100%" height="100%" alt="...">
                </div>
                <div class="item full">
                  <img src="images/slide2.jpg" width="100%" height="100%" alt="...">
                </div>
                <div class="item full">
                  <img src="images/slide3.jpg" width="100%" height="100%" alt="...">
                </div>
              </div>
            </div>
        </div>
    </div>
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
        $('.carousel').carousel({
          interval: 3000
        });
        </script>
    </body>
</html>

Css:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
* { box-sizing: border-box; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* comeco fade carousel */
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}
/* fim fade carousel */
.full{
   height: 100%;
}
.cor{
    position: absolute;
    background-color: rgba(255,255,255,0.6);
    z-index: 10;
    left: 50%;
    margin-left: -615px;
    height: 70px;
    top: 2%;
}
.nav-justified>li{
    width: 200px;
    padding: 5px;
}
.nav-justified{
    margin-top: 13px;
}
.nav-pills>li>a{
    color: #000;
    border-radius: 0;
    text-transform: uppercase;
    font-family: tahoma verdana;
    font-style: italic;
}
.nav-pills>li>a:hover{
    border-radius: 0;
    background-color: #262b31;
    color: #fff;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
    background-color: #262b31;
    color: #fff;
}
jquery css twitter-bootstrap

  • Can put the code you use to leave fullscreen on the desktop?

  • no I just did it just up before my Carousel div has a Fluid container and inside the Fluid container to Row but otherwise and that msm only put the width 100% and height 100% in img

2 answers

5


See if that solves your problem:

Put a height: 100% in the body.

Then create a class .full and give her a height: 100%:

.full{
   height: 100%;
}

Then apply this class to:

  • Cointainer-Fluid: <div class="container-fluid full">
  • The second .row: <div class="row full">
  • Caroussel-Inner: <div class="carousel-inner full" role="listbox">
  • And to each div.item.

I imagine that way it can work.

Why this happens is the fact that first, the body will er a height: auto by default, that is, its size will vary from acordor with a content. And the content in your case is the image size, which despite having a height: 100%, that height will be limited to height of div.item, which will be limited to div.row, which will be limited to cointainer-fluid, which will be limited to body. Leaving everyone with 100%, this is solved.

Obs.: Your own code has a little problem, because before, even though it was not full-screen, at least it preserved the proportionality of the images, which will not happen if you want the images to occupy the entire screen independent of the device, That’s impossible, unless there’s a cut, which I imagine in your case, won’t do.

Full code EDITED

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Eduardo Gonçalves Fotografia</title>
    <!--<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">-->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      body {
        overflow-y: hidden;
        overflow-x: hidden;
        height: 100%;
      }

    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      
      .full {
        height: 100%;
      }

      html,
      body {
        overflow-y: hidden;
        overflow-x: hidden;
        height: 100%;
      }

      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video { {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }

      * {
        box-sizing: border-box;
      }
      /* HTML5 display-role reset for older browsers */

      article, aside,details,figcaption,figure,footer,header,hgroup,menu,nav,
      section {
        display: block;
      }

      body {
        line-height: 1;
      }

      ol,
      ul {
        list-style: none;
      }

      blockquote,
      q {
        quotes: none;
      }

      blockquote:before,
      blockquote:after,
      q:before,
      q:after {
        content: '';
        content: none;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
      }
      /* comeco fade carousel */

      .carousel-fade .carousel-inner .item {
        opacity: 0;
        transition-property: opacity;
      }

      .carousel-fade .carousel-inner .active {
        opacity: 1;
      }

      .carousel-fade .carousel-inner .active.left,
      .carousel-fade .carousel-inner .active.right {
        left: 0;
        opacity: 0;
        z-index: 1;
      }

      .carousel-fade .carousel-inner .next.left,
      .carousel-fade .carousel-inner .prev.right {
        opacity: 1;
      }

      .carousel-fade .carousel-control {
        z-index: 2;
      }

      @media all and (transform-3d),
      (-webkit-transform-3d) {
        .carousel-fade .carousel-inner > .item.next,
        .carousel-fade .carousel-inner > .item.active.right {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.prev,
        .carousel-fade .carousel-inner > .item.active.left {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
      }
      /* fim fade carousel */

      .cor {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.6);
        z-index: 10;
        left: 50%;
        margin-left: -615px;
        height: 70px;
        top: 2%;
      }

      .nav-justified>li {
        width: 200px;
        padding: 5px;
      }

      .nav-justified {
        margin-top: 13px;
      }

      .nav-pills>li>a {
        color: #000;
        border-radius: 0;
        text-transform: uppercase;
        font-family: tahoma verdana;
        font-style: italic;
      }

      .nav-pills>li>a:hover {
        border-radius: 0;
        background-color: #262b31;
        color: #fff;
      }

      .nav-pills>li.active>a,
      .nav-pills>li.active>a:focus,
      .nav-pills>li.active>a:hover {
        background-color: #262b31;
        color: #fff;
      }

    </style>
  </head>

  <body>
    <div class="container-fluid full">
      <div class="row">
        <div class="cor">
          <div class="col-md-12 col-xs-12">
            <ul class="nav nav-pills nav-justified">
              <li role="presentation" class="active"><a href="index.html">Home</a></li>
              <li role="presentation"><a href="#">O Fotógrafo</a></li>
              <li role="presentation"><a href="#">Portfolio</a></li>
              <li role="presentation"><a href="#">Últimos Eventos</a></li>
              <li role="presentation"><a href="#">Área do Cliente</a></li>
              <li role="presentation"><a href="#">Contato</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row full">
        <div id="carousel-example-generic" class="carousel slide carousel-fade full" data-ride="carousel">
          <!-- Indicators -->
          <!--<ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>-->

          <!-- Wrapper for slides -->
          <div class="carousel-inner full" role="listbox">
            <div class="item active full">
              <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" style="height: 100%; width: 100%" alt="...">
            </div>
            <div class="item full">
              <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" style="height: 100%; width: 100%" alt="...">
            </div>
            <div class="item full">
              <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" style="height: 100%; width: 100%" alt="...">
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $('.carousel').carousel({
        interval: 3000
      });

    </script>
  </body>

</html>

0

Pull the slide from the . bootstrap container... or create a div ".container-fluid" out of its main container.

  • I will show my entire html it is in container-Fluid but on mobile devices does not get full screen as I wanted

Browser other questions tagged jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.