slider with html content

by austinpray

HTML

<h1>Why would you ever want to do this</h1>
<p>read up on the document object model <a href="https://developer.mozilla.org/en-US/docs/DOM">here</a> and also pretty much everything <a href="https://developer.mozilla.org/en-US/docs/Web/CSS?menu">here</a> and you will be set.</p>

<ul class="bxslider">
    <li><div class="contentPane">
Brittany Simon is a highly social 19-year-old college student who responded very rapidly and favorably to medical treatment. Her concentration, activity and impulsivity levels significantly improved as did her reading, writing, mental clarity, organization, mood and overall energy.</div></li>
    <li><div class="contentPane">I first saw Dr. Levinson in 1988, flying across country from San Diego, after a lumbar tap left me with disabling imbalance. I had a lifetime history of anxiety attacks, dyslexia and phobic responses, but these new imbalance symptoms were off the charts by comparison. After a day in Dr. L’s office, he was the first doctor to acknowledge that the lumbar tap could have played a role in my imbalance. He explained that already having an underlying vestibular disorder, the lumbar tap put me over the edge.

He gave me a “cocktail” of medications and supplements. Within just a few months the anxiety attacks, dyslexia and phobic responses were a distant memory and my balance had improved enough for me to return to work. Still, over the years I continued to struggle with my balance and was eventually diagnosed with MdDS (Mal de Debarquement Syndrome), a disabling balance condition that most people get after a cruise or rough plane ride. But mine had been caused by the lumbar tap.

I recently learned that there is a good likelihood that the lumbar tap caused a spinal fluid leak that causes my severe imbalance. When I learned this and made arrangements to have a blood patch to seal the spinal leak at Duke Medical Center, I contacted Dr. Levinson (9/12/12), 24 years after our first meeting. He explained to me that the outcome...

CSS

/**
 * BxSlider v4.0 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2012
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border: solid #fff 5px;
	left: -5px;
	background: #fff;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0...

JavaScript

/**
 * BxSlider v4.1.1 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Copyright 2012, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com
 * Written while drinking Belgian ales and listening to jazz
 *
 * Released under the WTFPL license - http://sam.zoy.org/wtfpl/
 */
!function(t){var e={},s={mode:"horizontal",slideSelector:"",infiniteLoop:!0,hideControlOnEnd:!1,speed:500,easing:null,slideMargin:0,startSlide:0,randomStart:!1,captions:!1,ticker:!1,tickerHover:!1,adaptiveHeight:!1,adaptiveHeightSpeed:500,video:!1,useCSS:!0,preloadImages:"visible",responsive:!0,touchEnabled:!0,swipeThreshold:50,oneToOneTouch:!0,preventDefaultSwipeX:!0,preventDefaultSwipeY:!1,pager:!0,pagerType:"full",pagerShortSeparator:" / ",pagerSelector:null,buildPager:null,pagerCustom:null,controls:!0,nextText:"Next",prevText:"Prev",nextSelector:null,prevSelector:null,autoControls:!1,startText:"Start",stopText:"Stop",autoControlsCombine:!1,autoControlsSelector:null,auto:!1,pause:4e3,autoStart:!0,autoDirection:"next",autoHover:!1,autoDelay:0,minSlides:1,maxSlides:1,moveSlides:0,slideWidth:0,onSliderLoad:function(){},onSlideBefore:function(){},onSlideAfter:function(){},onSlideNext:function(){},onSlidePrev:function(){}};t.fn.bxSlider=function(n){if(0==this.length)return this;if(this.length>1)return this.each(function(){t(this).bxSlider(n)}),this;var o={},r=this;e.el=this;var...