Foundation 5 Orbit slider skipping and stiking on small view - zurb-foundation

Question

I'm running into difficulties with Foundations Orbit slider on mobile and tablet views, when swiped with figure to the right the slides start to go then get a little stuck then they go to the next slide and so on, when swiped from right to left the slides and headline text get very messy, view website here: kids toy site
HTML
<div class="small-11 small-centered columns">
<ul class="orbit-content" data-orbit>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>jigsaws</h3>
<p>New jigsaws in stock. Colourful animal shapes designed to teach children numbers and the alphabet.</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-three/" title="jigsaws">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii-Slider_02.jpg" alt="slide image" />
</li>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>String Dolls</h3>
<p>String Dolls first appeared in Thailand over a decade ago. Since then they have been slowly making their way around the world.</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-two/" title="String Dolls">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii_slide01.jpg" alt="slide image" />
</li>
<li data-orbit-slide="headline-1">
<div class="large-5 medium-11 small-12 right columns insliderbox">
<h3>Socky Dolls</h3>
<p>Socky Dolls are a collectable range of heatable soft toys, made from real sock materials!</p>
<a class="button slider-btn left" href="http://kawaii-1.hksn.co.uk/tales-by-tigerlily/featured-news/featured-news-test-post-one/" title="Socky Dolls">Click to find out more</a>
</div>
<img src="http://kawaii-1.hksn.co.uk/wp-content/uploads/2014/09/Kawaii-Slider_03.jpg" alt="slide image" />
</li>
</ul>
</div>
</div>
CSS
.content-slider h3 {
font-weight: 700;
line-height: 1.1;
}
.content-slider {
position: relative;
}
.orbit-slide-number, .orbit-timer {
display: none;
}
.orbit-bullets-container {
position: relative;
z-index: 10;
}
.orbit-bullets li {
background: none repeat scroll 0 0 #f1f1f1;
}
.orbit-slides-container li {
position: relative;
z-index: 10;
}
.orbit-slides-container li div {
padding: 2em 50px;
position: relative;
top: 4.5em;
z-index: 10;
}
.orbit-slides-container li img {
left: 0;
position: absolute;
top: 0;
z-index: 0;
}
.orbit-container .orbit-slides-container img {
display: block;
max-width: 1282px;
max-height: 432px;
}
.orbit-container .orbit-slides-container > * {
height: 432px !important;
}
.orbit-container {
min-height: 432px;
}
.insliderbox {
background-color: rgba(240, 142, 10, 0.8);
margin: 0 42px 0 0;
}
.insliderbox h3 {
font-size: 2.2em;
}
#media screen and (min-width: 40.063em) and (max-width: 64.063em) {
.insliderbox h3 {
font-size: 1.8em;
}
.insliderbox {
margin: 0 4% 0 0;
}
}
#media screen and (max-width: 40.063em) {
.content-slider {
width: 100% !important;
}
.insliderbox h3 {
font-size: 1em;
}
.insliderbox p {
font-size: 0.8em;
}
.insliderbox {
padding: 5px 10px 1px !important;
}
.orbit-container .orbit-slides-container img {
display: block;
max-height: 212px;
}
.insliderbox {
margin: 0;
}
}
.orbit-prev {
background: url("../images/sprite-sheet.png") no-repeat scroll 2px -375px rgba(0, 0, 0, 0);
}
.orbit-prev:hover {
background: url("../images/sprite-sheet.png") no-repeat scroll 2px -454px rgba(0, 0, 0, 0);
}
.orbit-next {
background: url("../images/sprite-sheet.png") no-repeat scroll -9px -295px rgba(0, 0, 0, 0);
}
.orbit-next:hover {
background: url("../images/sprite-sheet.png") no-repeat scroll -9px -220px rgba(0, 0, 0, 0);
}
.orbit-container .orbit-next:hover,
.orbit-container .orbit-prev:hover,
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.orbit-container .orbit-prev, .orbit-container .orbit-next {
margin-top: 17px;
width: 50px;
top: 35%;
}
.orbit-container {
overflow: visible !important;
}
.orbit-slides-container {
overflow: hidden !important;
}
.orbit-container .orbit-prev {
margin-left: -5%;
}
.orbit-container .orbit-next {
margin-right: -5%;
}
.content-slider, .content-slider h3 {
color: #fff;
}
#media screen and (max-width:40.063em) {
.orbit-slides-container li div {
padding: 2em 0;
}
.orbit-next, .orbit-prev {
display: none;
}
}
#media screen and (min-width:768px) and (max-width:1024px) {
.orbit-slides-container li div {
top: 11.5em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.1em;
}
}
#media screen and (min-width:741px) and (max-width:768px) {
.orbit-slides-container li div {
top: 10em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.1em;
}
}
#media screen and (min-width:600px) and (max-width:741px) {
.orbit-slides-container li div {
top: 11em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.5em;
}
}
#media screen and (min-width:458px) and (max-width:600px) {
.orbit-slides-container li div {
top: 9em;
}
button, .button.slider-btn {
position: relative;
bottom: 1.5em;
}
}
#media screen and (max-width:458px) {
.orbit-slides-container li div {
top: 13.23em;
}
button, .button.slider-btn {
font-size: 0.3rem;
float: left !important;
margin: -19px 0 12px;
}
.content-slider:after {
margin-top: -65px !important;
}
}
JS
$(document).foundation('section').foundation('orbit', {
timer_speed: 3000,
animation_speed: 400,
stack_on_small: false,
navigation_arrows: true,
slide_number: false,
pause_on_hover: false,
resume_on_mouseout: false,
timer: false,
variable_height: false,
});
I have tried taking away the JS, the CSS nothing changes and I have tried copying pasting HTML directly from the Zurb Foundation Orbit webpage, no change, it is a Wordpress site so I took down all the plugins...no change? Kinda stuck, any ideas most welcome.
Thanks