CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapbootstrap-carousel
michltm
michltm

Reputation: 1469

Bootstrap carousel taking full display of right side of a browser window

I am trying to get the boostrap carousel taking the full display of the right side of a browser window.

For this, the margins of the carousel should by modified to leave the image in the center of the right side at the max width (5/12 of the page) or max height (height of the browser window) depending on the image aspect ratio.

Here is an example of what I am trying to get:

enter image description here

Here is a Fiddle with how it is working currently: https://jsfiddle.net/v71c8udo/7/

And here is the current HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
        width: 100%;
        height: 100%;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="navbar navbar-default navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">website</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
          </button>
        </div>
      </div>
    </div>
    <div class="col-sm-offset-7 col-sm-5" style="margin-right:0px;padding-right:0px; height:100vh;">
      <br>
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="https://culturieuse.files.wordpress.com/2015/02/arearea_by_paul_gauguin-joyfulness-1892.jpg" alt="Chania">
          </div>

          <div class="item">
            <img src="http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg" alt="Chania">
          </div>

          <div class="item">
            <img src="http://www.leboismiroir.fr/wp-content/uploads/Pld-Gauguin.jpg" alt="Flower">
          </div>


          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 3

Views: 3520

Answers (3)

Octav
Octav

Reputation: 122

This worked for me but I don't think it's supported by IE<9

.carousel {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Upvotes: 0

silviagreen
silviagreen

Reputation: 1729

.carousel, .carousel-inner, .carousel-inner > .item{
  height:100%;
  }

body .carousel-inner > .item > img{
  height: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  }
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {
        width: 100%;
        height: 100%;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="navbar navbar-default navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">website</a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
          </button>
        </div>
      </div>
    </div>
    <div class="col-sm-offset-7 col-sm-5" style="margin-right:0px;padding-right:0px; height:100vh;">
      <br>
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="https://culturieuse.files.wordpress.com/2015/02/arearea_by_paul_gauguin-joyfulness-1892.jpg" alt="Chania">
          </div>

          <div class="item">
            <img src="http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg" alt="Chania">
          </div>

          <div class="item">
            <img src="http://www.leboismiroir.fr/wp-content/uploads/Pld-Gauguin.jpg" alt="Flower">
          </div>


          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Armfoot
Armfoot

Reputation: 4921

You are missing something like this:

#myCarousel {
  height:100%;
  padding-top: 150px;
  background-color: gray;
}

You need to adjust the padding according to how far you want the slider to be from the top or sides, and you need to reference the whole outer container for this (Fiddle).

Upvotes: 1

Related Questions