2013-02-07 49 views
0

我已經在這2天了。我正在嘗試使用this jQuery插件來設置一個簡單的內容滑塊。我想到的滑塊只有2個面板(幻燈片),都應該有固定的高度和寬度。無法獲得Coda滑塊工作

我按照它的文檔試過,沒地方。我下載了源代碼並解析了索引頁,刪除了除滑塊之外的所有其他HTML,並將所需的文件與所需的文件一起應對,但仍無濟於事,現在我完全沮喪。

下面是我現在的代碼。

HTML

<html> 
<head> 
<title>Untitled Document</title> 
<!--stylesheets--> 
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" /> 
<link rel="stylesheet" type="text/css" href="stylesheets/coda-slider.css" /> 
<link rel="stylesheet" type="text/css" href="stylesheets/myStyles.css" /> 

<!--scripts--> 
<script type="text/javascript" src="scripts/jquery.min.js"></script> 
<script type="text/javascript" src="scripts/jquery-ui-1.10.0.custom.min.js"></script> 
<script type="text/javascript" src="scripts/jquery.coda-slider-3.0.js"></script> 

<script type="text/javascript"> 
$(function() { 
    $('#main-slider').codaSlider({ 
     autoHeight: false, 
     continuous:false, 
     dynamicArrows: false, 
     dynamicTabs: false 
    }); 
    $('#showcase').codaSlider(); 
}); 

</script> 
</head> 
<body> 

<div class="coda-slider" id="main-slider"><!-- Main Slider --> 
    <div> 

      <div class="coda-slider" id="showcase"><!-- Showcase Slider --> 

       <div id="first"><!-- first panel --> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
       </div><!-- end of first panel --> 

       <div id="second"><!-- second panel --> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
       </div><!-- end of second panel --> 

      </div> <!-- End Showcase Slider --> 

    </div> 
</div><!-- End Main Slider --> 

</body> 
</html> 

CSS

body { 
    background-color:#FC9; 
} 

#main-slider { 
    width:1000px; 
    height:600px; 
    background-color:#FFF; 
    margin:80px auto; 
} 

] 
#showcase { 
    width:1000px; 
    height:600px; 
} 

#first { 
    width:1000px; 
    height:600px; 
    background-color:#CF6; 
} 

#second { 
    width:1000px; 
    height:600px; 
    background-color:#F36; 
} 

也許我只是忽視的東西。根據文件,它應該很容易。有人能告訴我我在這裏錯過了什麼嗎?或者更好的是,如果沒有太多的麻煩,就要舉一個例子呢?我真的很感激它!

謝謝。

+0

當你下載的源,併成功地運行?您的文件結構是否與您複製的源文件完全相同?還要檢查你的控制檯是否有錯誤。 –

+0

是的,源代碼運行良好,即使解剖後也是如此。文件結構也是一樣的。我已經包含了文檔中提到的所有文件。搜索了這個插件的教程,但找不到任何一個。 :/ – Isuru

+0

該插件的網站幾乎在主頁上的一切,以實現它。我同意@Klasu,看起來你的html是錯誤的每個例子的源網站。看起來你正在調用兩次函數,一次在'main-slider'上,然後再次在'showcase'上。 –

回答

3

我從來沒有嘗試過的插件,但你有沒有嘗試過簡單地改變

$(function() { 
    $('#main-slider').codaSlider({ 
     autoHeight: false, 
     continuous:false, 
     dynamicArrows: false, 
     dynamicTabs: false 
    }); 
    $('#showcase').codaSlider(); 
}); 

$(function() { 
    $('#main-slider').codaSlider({ 
     autoHeight: false, 
     continuous:false, 
     dynamicArrows: false, 
     dynamicTabs: false 
    }); 
}); 

目前好像你想創建一個滑塊內滑塊,但我從你的問題中得到了這種感覺,那不是你想要的行爲。

加法:忘了提也改變這一點:

<div class="coda-slider" id="main-slider"><!-- Main Slider --> 
    <div> 

      <div class="coda-slider" id="showcase"><!-- Showcase Slider --> 

       <div id="first"><!-- first panel --> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
       </div><!-- end of first panel --> 

       <div id="second"><!-- second panel --> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
       </div><!-- end of second panel --> 

      </div> <!-- End Showcase Slider --> 

    </div> 
</div> 

<div class="coda-slider" id="main-slider"><!-- Main Slider --> 
     <div id="first"><!-- first panel --> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
     </div><!-- end of first panel --> 

     <div id="second"><!-- second panel --> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
     </div><!-- end of second panel --> 

</div> 
+0

你說得對,克勞蘇!我做了你提到的改變,並做了一些調整自己,我能夠得到它的工作!我不能夠感謝你。它對我發佈的代碼很奇怪,因爲這就是源代碼。哦,無所謂了。謝謝。 :) – Isuru