bxSlider 2 panes

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

by Charles Butler

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="row collapse slide-pane">
        <div class="small-6 medium-6 large-6 columns">
            <img src="http://placehold.it/350x250/5E7074/FFFFFF&text=Slide-One" />
        </div>
        <div class="small-6 medium-6 large-6 columns text-pane">
            
<h1>Are you ready for the truth?</h1>

            <p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
        </div>
    </div>
    <div class="row collapse slide-pane">
        <div class="small-6 medium-6 large-6 columns">
            <img src="http://placehold.it/350x250/5E7074/FFFFFF&text=Slide-Two" />
        </div>
        <div class="small-6 medium-6 large-6 columns text-pane">
            
<h1>Are you ready for the truth?</h1>

            <p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
        </div>
    </div>
    <div class="row collapse slide-pane">
        <div class="small-6 medium-6 large-6 columns">
            <img src="http://placehold.it/350x250/5E7074/FFFFFF&text=Slide-Three" />
        </div>
        <div class="small-6 medium-6 large-6 columns text-pane">
            
<h1>Are you ready for the...

CSS

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

JavaScript

$(document).foundation();

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

});