title: Full Width but Fixed Height Responsive Slider
body: <p>I want to make Responsive and fixed height responsive slider like <a href="http://blog.invisionapp.com" rel="nofollow">http://blog.invisionapp.com</a>. </p>
  
  <p>How to do that?</p>
  
  <p>I've written the following code (I've also made a <a href="https://jsfiddle.net/yu0ma2mk" rel="nofollow">JSFiddle</a>):</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="img-carousel" data-ride="carousel" class="carousel slide"&gt;
    &lt;!-- Indicators--&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#img-carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#img-carousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#img-carousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;!-- Wrapper for slides--&gt;
    &lt;div role="listbox" class="carousel-inner"&gt;
      &lt;div class="item active"&gt;&lt;img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-1.jpg" alt=""/&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h2 class="animated fadeInDown"&gt;Caption Animation&lt;/h2&gt;
          &lt;p class="animated fadeInUp"&gt;&lt;a href="#" class="btn btn-transparent btn-rounded btn-large"&gt;Learn More&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-2.jpg" alt=""/&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h2 class="animated bounceInDown"&gt;Bootstrap Slider&lt;/h2&gt;
          &lt;p class="animated bounceInUp"&gt;&lt;a href="#" class="btn btn-transparent btn-rounded btn-large"&gt;Get Started&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;&lt;img src="https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-3.jpg" alt=""/&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h2 class="animated fadeInDown"&gt;Mobile Friendly&lt;/h2&gt;
          &lt;p class="animated fadeInRight"&gt;&lt;a href="#" class="btn btn-transparent btn-rounded btn-large"&gt;Download Now!&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Controls--&gt;&lt;a href="#img-carousel" role="button" data-slide="prev" class="left carousel-control"&gt;&lt;i aria-hidden="true" class="fa fa-chevron-left"&gt;&lt;/i&gt;&lt;span class="sr-only"&gt;Previous&lt;/span&gt;&lt;/a&gt;&lt;a href="#img-carousel" role="button" data-slide="next" class="right carousel-control"&gt;&lt;i aria-hidden="true" class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;span class="sr-only"&gt;Next&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.carousel-inner .item {
    max-height: 680px;
  }
  .carousel-inner .item:after {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  .carousel-control {
    width: 10%;
  }
  
  .carousel-control .fa {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
  }
  .carousel-control .fa.fa-chevron-right {
    right: 50%;
    margin-right: -10px;
  }
  
  @media screen and (min-width: 768px) {
    .carousel-control .fa {
      width: 30px;
      height: 30px;
      margin-top: -15px;
      font-size: 30px;
    }
  }
  @media screen and (min-width: 768px) {
    .carousel-control .fa-chevron-left {
      margin-left: -15px;
    }
  }
  /**
   * Slider caption
   */
   .right.carousel-control, .left.carousel-control {
      display: none;
  }
  .carousel-caption h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .carousel-caption p {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-size: 20px;
    margin-bottom: 50px;
  }
  @media screen and (min-width: 768px) {
    .carousel-caption {
      right: 20%;
      left: 20%;
      bottom: 20%;
    }
  }
  .btn-transparent {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
  }
  .btn-transparent:hover {
    background-color: #fff;
  }
  
  .btn-rounded {
    border-radius: 70px;
  }
  
  .btn-large {
    padding: 11px 45px;
    font-size: 18px;
  }
  
  /**
   * Change animation duration
   */
  .animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
  
  
  .blogs img{
    width: 100%;
  }
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>$('.carousel').carousel({
      pause: 'none'
  })
  </code></pre>