bxSlider 2 panes

Reference: http://stackoverflow.com/questions/20488330/bxslider-wont-allow-html-text-within-slides

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/5.0.3/css/foundation.min.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/5.0.3/css/normalize.css">
<script src="http://cdn.jsdelivr.net/foundation/5.0.3/js/foundation.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<div class="bxslider">
    
        <div class="text-pane">
            
<h3>Are you ready for quote1?</h3>

            
        </div>
    
    
        <div class="small-6 medium-6 large-6 columns text-pane">
            
<h3>Are you ready for quote2?</h3>

            
        </div>

    
        <div class="text-pane">
            
<h3>Are you ready for quote3?</h3>

            
</div>        
</div>
 
</div>

CSS

.slide-pane {
    background:#344A5E;
    color:#FFF;
}
.text-pane {
    background:#fff;
    color:#FFF;
    padding:20px 0 0 20px !important;
}
h3 {
    font-size:22px;
    color: #2ecc71;
    font-weight: bold
}
p {
    font-size:13px;
}

JavaScript

$(document).foundation();

var slider = $('.bxslider').bxSlider({

});