Foundation Orbit圖像滑塊無法正常工作？

好的，所以我正在嘗試使用Foundations Orbit媒體容器。我更擅長於HTML/CSS，幾乎沒有JS的經驗。但！要找到一個自動播放CSS/HTML僅圖像滑塊是不可能的。或昂貴。無論如何，我正嘗試使用Foundation Docs頁面上的Orbit一個，但我認爲我搞砸了。誰能幫我？下面的代碼片段：Foundation Orbit圖像滑塊無法正常工作？

HMTL

<div class="row"> 
     <div class="large-12 columns"> 
     <div class="panel"> 
    <div class="orbit-container">  
    <ul> 
    <li> 
    <img src="assets/infinity.png" alt="slide 1" /> 
    </li> 
    <li class="active"> 
    <img src="assets/Image1.png" alt="slide 2" /> 
    </li> 
    <li> 
    <img src="assets/image2.png" alt="slide 3" /> 
    </li> 
</ul>

這裏的CSS。這不是完整的CSS，但我很確定我正在識別Orbit HTML錯誤。我的油炸意識現在無法理解。

/* Orbit Graceful Loading */ 
.slideshow-wrapper { 
    position: relative; } 
    .slideshow-wrapper ul { 
    list-style-type: none; 
    margin: 0; } 
    .slideshow-wrapper ul li, 
    .slideshow-wrapper ul li .orbit-caption { 
     display: none; } 
    .slideshow-wrapper ul li:first-child { 
     display: block; } 
    .slideshow-wrapper .orbit-container { 
    background-color: transparent; } 
    .slideshow-wrapper .orbit-container li { 
     display: block; } 
     .slideshow-wrapper .orbit-container li .orbit-caption { 
     display: block; } 
    .slideshow-wrapper .orbit-container .orbit-bullets li { 
     display: inline-block; } 
    .slideshow-wrapper .preloader { 
    display: block; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -20px; 
    margin-left: -20px; 
    border: solid 3px; 
    border-color: #555555 white; 
    border-radius: 1000px; 
    animation-name: rotate; 
    animation-duration: 1.5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; } 

.orbit-container { 
    overflow: hidden; 
    width: 100%; 
    position: relative; 
    background: none; } 
    .orbit-container .orbit-slides-container { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    -webkit-transform: translateZ(0); } 
    .orbit-container .orbit-slides-container img { 
     display: block; 
     max-width: 100%; } 
    .orbit-container .orbit-slides-container > * { 
     position: absolute; 
     top: 0; 
     width: 100%; 
     margin-left: 100%; } 
     .orbit-container .orbit-slides-container > *:first-child { 
     margin-left: 0%; } 
     .orbit-container .orbit-slides-container > * .orbit-caption { 
     position: absolute; 
     bottom: 0; 
     background-color: rgba(51, 51, 51, 0.8); 
     color: white; 
     width: 100%; 
     padding: 0.625rem 0.875rem; 
     font-size: 0.875rem; }

我把所有的JS文件放在我的HTML文件中，因爲它告訴我......我不知道該從哪裏出發。

來源

2014-12-02 missxcurious