Bootstrap 3 Jumbotron - Carousel - Slide Content - Slide Thumbnails

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>

  <div id="wrapper">

    <!--end container-->


    <div class="container">

      <!-- Slider -->
      <div class="row-fluid">
        <div class="jumbotron top">

          <ul id="scene" limit-y="1" class="scene col12">

            <li class="layer layer-1" data-depth="0.95">
              
            </li>

            <li class="layer layer-2 scroll" data-depth="2.40">
              <img src="http://pngimg.com/uploads/cloud/cloud_PNG31.png" alt="">
            </li>


            <li class="layer layer-3 city-jumbo" limit-y="true" data-depth="2.00">
              <img limit-y="true" src="http://svgshare.com/i/ti.svg" alt="">
            </li>

        <li class="layer layer-4" data-depth="0.15">
              <h1>
              MVC TECH
              </h1>
            </li>
                    <li class="layer layer-5" data-depth="0.15">
              <h2>
              Providing a service blalalalla
              </h2>
            </li>

          </ul>

        </div>
      </div>
    </div>
    <!--end container-->



  </div>
  <!-- end wrapper  -->

CSS

.top {
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
  height: auto;
  max-height: 300px;
  min-height:300px;
  padding-left: 0!important;
  padding-right: 0!important;
  padding-bottom: 0!important;
  background:black;
  margin-left:auto;
  margin-right:auto;
  width:1000px;
}

.scene {
  width: 100%!important;
  position: relative;
  min-height:300px;
  max-height:300px;
    

}


/*  Reset.css  */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: arial;
}


/*  Grid.css  */

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.row {
  *zoom: 1;
  clear: both;
}

.col25 {
  width: 25%;
  float: left;
  display: block;
}

.col33 {
  width: 33.33%;
  float: left;
  display: block;
}

.col50 {
  width: 50%;
  float: left;
  display: block;
}

.col75 {
  width: 75%;
  float: left;
  display: block;
}

.col100 {
  width: 100%;
  float: left;
  display: block;
}

img {
  display: block;
  max-width: 300%;
}

.scene {
  height: 300px;
  background: #ccc;
  margin: 0 auto;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 9999;
}

.layer {
  width: 100%!important;
  min-height:300px;
  float:bottom;
  position:relative;
}

.layer-1 {
  top: auto !important;
  bottom: 0;
  left: 0;
  margin-left: -0%;
  right: auto !important;
  background:
  
  linear-gradient(80deg,transparent 86.3%,black 86.3%,black),
  linear-gradient(72deg,transparent 75.4%,#ddd 75.4%,#ddd),

  linear-gradient(63deg,transparent 66.25%,black 66.25%,black),

  linear-gradient(54deg,transparent 57.85%,#ddd 57.85%,#ddd),

  linear-gradient(45deg,transparent 49.9%,black 49.9%,black),

  linear-gradient(36deg,transparent 41.96%,#ddd 41.96%,#ddd),

  linear-gradient(27deg,transparent 33.6%,black 33.6%,black),

  linear-gradient(18deg,transparent 24.35%,#ddd 24.35%,#ddd),

  linear-gradient(10deg,transparent 13.6%,black 13.6%,black);

background-position: 0 0;

background-color:...

JavaScript

/**
 * Parallax.js
 * @author Matthew Wagerfield - @wagerfield
 * @description Creates a parallax effect between an array of layers,
 *              driving the motion from the gyroscope output of a smartdevice.
 *              If no gyroscope is available, the cursor position is used.
 */
;
(function(window, document, undefined) {

  // Strict Mode
  'use strict';

  // Constants
  var NAME = 'Parallax';
  var MAGIC_NUMBER = 30;
  var DEFAULTS = {
    relativeInput: false,
    clipRelativeInput: false,
    calibrationThreshold: 100,
    calibrationDelay: 500,
    supportDelay: 500,
    calibrateX: false,
    calibrateY: true,
    invertX: true,
    invertY: true,
    limitX: false,
    limitY: true,
    scalarX: 10.0,
    scalarY: 0.0,
    frictionX: 0.1,
    frictionY: 0.1,
    originX: 0.5,
    originY: 0.5
  };

  function Parallax(element, options) {

    // DOM Context
    this.element = element;
    this.layers = element.getElementsByClassName('layer');

    // Data Extraction
    var data = {
      calibrateX: this.data(this.element, 'calibrate-x'),
      calibrateY: this.data(this.element, 'calibrate-y'),
      invertX: this.data(this.element, 'invert-x'),
      invertY: this.data(this.element, 'invert-y'),
      limitX: this.data(this.element, 'limit-x'),
      limitY: this.data(this.element, 'limit-y'),
      scalarX: this.data(this.element, 'scalar-x'),
      scalarY: this.data(this.element, 'scalar-y'),
      frictionX: this.data(this.element, 'friction-x'),
      frictionY: this.data(this.element, 'friction-y'),
      originX: this.data(this.element, 'origin-x'),
      originY: this.data(this.element, 'origin-y')
    };

    // Delete Null Data Values
    for (var key in data) {
      if (data[key] === null) delete data[key];
    }

    // Compose Settings Object
    this.extend(this, DEFAULTS, options, data);

    // States
    this.calibrationTimer = null;
    this.calibrationFlag = true;
    this.enabled = false;
    this.depths = [];
   ...