Bootstrap Carousel Practice

Make it happen.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script>
<div class="page">
 <div class="parent">
  <div id="mycar" class="carousel slide dashpic-wrap" data-ride="carousel" data-wrap ="false" data-interval="false">
    <div class="carousel-inner">
        <div class="item active">
    <img class="dashpic" src="http://201307.estateauctionpics.com/20130729175823_5.jpg"></img>
        </div>
       <div class="item">
    <img class="dashpic" src="http://201307.estateauctionpics.com/20130729175823_13.jpg"></img>
        </div>
        <div class="item">
    <img class="dashpic" src="http://201307.estateauctionpics.com/20130729175823_9.jpg">    </img>
        </div>
        <div class="item">
    <img class="dashpic" src="http://201307.estateauctionpics.com/20130729175823_2.jpg"></img>
        </div>
    </div>
  <a class="left carousel-control" href="#mycar" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
        
  <a class="right carousel-control" href="#mycar" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
        
  </div>
 </div>

    <hr/>
        <div class="row">
            <label class="col-xs-3 col-sm-2 col-md-1 text-right">ID</label>
            <div class="col-xs-1"></div>
            <div class="col-xs-8 col-sm-9 col-md-10 text-left">
                <p class="lead">20130729175823</p>
            </div>
        </div>
        <div class="row">
            <label class="col-xs-3 col-sm-2 col-md-1 text-right">TITLE</label>
            <div class="col-xs-1"></div>
            <div class="col-xs-8 col-sm-9 col-md-10 text-left">
                <p...

CSS

.parent {
    position: relative;
}
.parent div {
    width: 100%;
    height: 0;
    padding-bottom: 75%;  
}

.parent img {
    display: block;
    max-height: 100%;
    width: auto;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

JavaScript

$("#mainButton").on('click', function(){
    $("p").replaceWith(function(){
       var myVal = $(this).html();
       var myEl = '<input type="text" class="text-left" value="'+myVal+'"></input>';
        return myEl;
    });
});