Jssor jQuery slider not displaying properly

I’m having a hard time getting this thing to work. The javascript files needed are loaded.
What I want to accomplish: http://www.jssor.com/demos/grid-slider.html

What I have accomplished using the code straight from the example:
http://i.imgur.com/kP6QoZl.jpg

The slider moves like one image, and it only move to the left and right a bit before bouncing back.

I had to strip all of the css out of the code and put it in the style.css, but some had to stay, or it doesn’t display properly.
The slider above is set up on

Right now I am using the 2015 default theme to see if the last theme was the problem, but there was no difference when I switched themes. The code is almost a direct copy of the code from the template I linked except for the image code and the css.
`
<div id=”sliderh1_container”>
<!– Slides Container –>
<div u=”slides” style=”cursor: move; position: absolute; left: 0px; top: 0px; width: 809px; height: 456px;
overflow: hidden;”>
<div>
<div id=”sliderh1_container” style=”position: relative; top: 0px; left: 0px; width: 809px;
height: 150px;”>

<!– Slides Container –>
<div id=”sliderh1_container_sub1″ u=”slides” >
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/044.jpg&#8221; /></div>
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/022.jpg&#8221; /></div>
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/011.jpg&#8221; /></div>
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/005.jpg&#8221; /></div>
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/044.jpg&#8221; /></div>
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/022.jpg&#8221; /></div>
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/011.jpg&#8221; /></div>
<div><img u=”image” src=”http://localhost/pw%20mccallum%20roofing/wp-content/uploads/2015/08/005.jpg&#8221; /></div>
</div>
<!–#region Bullet Navigator Skin Begin –>
<!– Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html –>
<!– bullet navigator container –>
<div u=”navigator” class=”jssorb03″>
<!– bullet navigator item prototype –>
<div u=”prototype”><div u=”numbertemplate”></div></div>
</div>
<!–#endregion Bullet Navigator Skin End –>
</div>
</div>

<div>
<div id=”sliderh2_container”>

<!– Slides Container –>
<div id=”sub_sliderh2″ u=”slides”>
//image links, they work fine.
</div>
<!–#region Bullet Navigator Skin Begin –>

<!– bullet navigator container –>
<div u=”navigator” class=”jssorb03″ style=”bottom: 10px; right: 10px;”>
<!– bullet navigator item prototype –>
<div u=”prototype”><div u=”numbertemplate”></div></div>
</div>
<!–#endregion Bullet Navigator Skin End –>
</div>
</div>
<div>
<div id=”sliderh3_container” >

<!– Slides Container –>
<div u=”slides”>
//more images
</div>
<!–#region Bullet Navigator Skin Begin –>
<!– Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html –>
<!– bullet navigator container –>
<div u=”navigator” class=”jssorb03″ style=”bottom: 10px; right: 10px;”>
<!– bullet navigator item prototype –>
<div u=”prototype”><div u=”numbertemplate”></div></div>
</div>
<!–#endregion Bullet Navigator Skin End –>
</div>
</div>
<div>
<div id=”sliderh4_container”>

<!– Slides Container –>
<div u=”slides” >
//more images
</div>
<!–#region Bullet Navigator Skin Begin –>
<!– Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html –>
<!– bullet navigator container –>
<div u=”navigator” class=”jssorb03″ style=”bottom: 10px; right: 10px;”>
<!– bullet navigator item prototype –>
<div u=”prototype”><div u=”numbertemplate”></div></div>
</div>
<!–#endregion Bullet Navigator Skin End –>
</div>
</div>
</div>

<!–#region Bullet Navigator Skin Begin –>
<!– Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html –>

<!– bullet navigator container –>
<div u=”navigator” class=”jssorb02″ style=”bottom: 16px; left: 6px;”>
<!– bullet navigator item prototype –>
<div u=”prototype”><div u=”numbertemplate”></div></div>
</div>
<!–#endregion Bullet Navigator Skin End –>
Bootstrap Slider
</div>”
<!– Jssor Slider End –>

Just to add, I know there is a plugin for this slider but it doesn’t let me create a grid like I want it too.