Hero slider dynamic content

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 hero-slider-dynamic-content" 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 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>
        </div>
      </div>
      <div class="item image-two">
        <div class="container ontop">
          <div class="row">
            <div class="col-sm-6 content" id="slider-content">
              <h1>Sed ut perspiciatis</h1>
              <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
								<br>
								Nemo enim...

SCSS

.hero {
	
	.overlay {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
		opacity: 0.5;
	}
	
	.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);
});