我已經在這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;
}
也許我只是忽視的東西。根據文件,它應該很容易。有人能告訴我我在這裏錯過了什麼嗎?或者更好的是,如果沒有太多的麻煩,就要舉一個例子呢?我真的很感激它!
謝謝。
當你下載的源,併成功地運行?您的文件結構是否與您複製的源文件完全相同?還要檢查你的控制檯是否有錯誤。 –
是的,源代碼運行良好,即使解剖後也是如此。文件結構也是一樣的。我已經包含了文檔中提到的所有文件。搜索了這個插件的教程,但找不到任何一個。 :/ – Isuru
該插件的網站幾乎在主頁上的一切,以實現它。我同意@Klasu,看起來你的html是錯誤的每個例子的源網站。看起來你正在調用兩次函數,一次在'main-slider'上,然後再次在'showcase'上。 –