我在移动设备和平板电脑视图上遇到了基础轨道滑块的困难，当向右滑动图片时，幻灯片开始移动然后稍微卡住，然后他们转到下一张幻灯片，依此类推，当从从右到左的幻灯片和标题文字变得非常混乱，在这里查看网站：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， 计时器：假， variable_height：false， }）;
我试过带走JS，CSS没有任何变化，我尝试直接从Zurb Foundation Orbit网页复制粘贴HTML，没有变化，它是一个Wordpress网站所以我取下了所有的插件......没有变化？有点卡住，任何想法最受欢迎。
由于