私はこれを2日間続けています。このjQuery プラグインを使用して、単純なコンテンツ スライダーをセットアップしようとしています。私が考えているスライダーには2つのパネル(スライド)しかなく、どちらも高さと幅が固定されている必要があります。
ドキュメントに従って試しましたが、どこにも行きませんでした。ソースをダウンロードし、インデックス ページを分析し、スライダーを除く他のすべての 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;
}
多分私は何かを見落としているだけです。ドキュメントによると、非常に簡単なはずです。誰かが私がここで欠けているものを教えてもらえますか? それとも、あまり問題がなければ、例を一緒に平手打ちしますか? 本当に感謝します！
ありがとうございました。