Bootstrap carousel as full page slider with static text

Question

I need to a slider which will have static text on all slide with changing background and this slider should be responsive.

I tried few options but we keep getting stuck into one or teh other issue

I am using Bootstrap carousel but it not working as intended. I face following issue with it. Height/width should adjust to screen height/width for large screen & mobile screens but i am not able to make it work that way and help

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <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>
        <div class="carousel-inner">
          <div class="item active">
            <img src="https://images8.alphacoders.com/430/thumb-1920-430508.jpg" alt="First slide">
            <div class="carousel-caption">
              <h3>
                                First slide</h3>
              <p>
                Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item">
            <img src="https://images4.alphacoders.com/658/thumb-1920-658896.jpg" alt="Second slide">
            <div class="carousel-caption">
              <h3>
                                Second slide</h3>
              <p>
                Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
          <div class="item">
            <img src="http://www.tokkoro.com/picsup/1190917-tree-frog.jpg" alt="Third slide">
            <div class="carousel-caption">
              <h3>
                                Third slide</h3>
              <p>
                Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                        </span></a>
      </div>
      <div class="main-text hidden-xs">
        <div class="col-md-12 text-center">
          <h1>
                        Static Headline And Content</h1>
          <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      
                       
                    </h3>

        </div>
      </div>
    </div>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

https://codepen.io/anon/pen/baNPqE

Possible duplicate of [How to make bootstrap carousel image responsive?](https://stackoverflow.com/questions/21178012/how-to-make-bootstrap-carousel-image-responsive) — Mhd Alaa Alhaj, Dec 14 '17 at 07:23

score 0 · Answer 1 · answered Dec 14 '17 at 07:22

0

Add the following to your CSS code and it should be fine, i.e. the height of the screen for the carousel:

.carousel {
  max-height: 100vh;
}
.item {
  max-height: 100vh
}

link https://codepen.io/kvyb/pen/ppvXqd

answered Dec 14 '17 at 07:22

Kristian Vybiral

509
9
20

1

This doesn't adjust carousal to 100% height in mobile version – Learning Dec 14 '17 at 07:50

Bootstrap carousel as full page slider with static text

1 Answers1