Hero slider

by cintia_rodrigues

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="hero hero-slider-text-btn" id="hero-slider">
  <!-- Carousel -->
  <div id="carousel-example-generic" class="carousel slide" 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">
      <div class="item active image-one"></div>
      <div class="item image-two"></div>
      <div class="item image-three"></div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

    <div class="container ontop">
      <div class="row">
        <div class="col-sm-6 content" id="slider-content">
          <h1>Lorem Ipsum</h1>
          <p>
            Aenean a lacus vehicula, interdum leo suscipit, blandit augue. Quisque scelerisque massa vel nibh vestibulum euismod eu sagittis felis. Quisque tempor ante porta egestas commodo. Sed finibus ligula quis magna imperdiet, et fringilla libero finibus. Nulla
            ex leo, rutrum tincidunt lorem et, ultrices rutrum odio.
          </p>
          <div class="btn btn-primary btn-lg btn-round">
            Call to Action
          </div>
        </div>
      </div>
   ...

SCSS

.hero {
	.carousel {
		height: 100%;
		
		.carousel-inner {
			height: 100%;
			
			.item {
				height: 100%;
				background-size: cover;
				background-repeat: no-repeat;
        background-position: center; 
			}
		}
		.carousel-control {
		  width: 40px;
		  z-index: 2;
		
			.glyphicon  {
				left: 10px;
			}
		}
	}	
}

.hero-slider-text-btn {
	height: auto;
	color: #fff;
	
	.image-one {
		background: url(http://stuckincustoms.smugmug.com/Portfolio/i-JSxf5Nm/0/X3/Burning-Man-Day-6%20%28202%20of%201606%29-X3.jpg);
	}
	
	.image-two {
		background: url(http://stuckincustoms.smugmug.com/Portfolio/i-KMjVHRd/0/X3/Andramada-X3.jpg);
	}
	
	.image-three {
		background: url(http://stuckincustoms.smugmug.com/Burning-Man/i-dd9xmfn/0/X3/The%20Steamy%20Car-X3.jpg);
	}
	
	.content {
		padding: 60px 30px;
		z-index: 1;
	}
}

.ontop {
	  position: absolute;
		top: 0;
    right: 0;
    left: 0;
}

@media all and (max-width:768px) {	
  .hero-slider-text-btn {  	
  	.content {
  		padding: 60px;
  	}
  }
}

JavaScript

//Make slider responsive
var heroSlider = $('#hero-slider'); 
var sliderHeight = $('#slider-content').outerHeight();
heroSlider.height(sliderHeight);

//Make slider responsive on resize
$(window).resize(function(){
var heroSlider = $('#hero-slider'); 
var sliderHeight = $('#slider-content').outerHeight();
    heroSlider.height(sliderHeight);
});