jquery 插件 codaslider
我正在尝试使用 codaslider 插件，但它对我不起作用。我认为我做的一切都是正确的，但仍然不起作用。有人可以帮我找出我犯了什么错误吗？下面是我的代码。问题是它不能从一个面板滑到另一个面板。我已经阅读了文档，但我不知道我在这里犯了什么错误。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#codaslider5').codaSlider({
dynamicArrows: false,
dynamicTabs: false
});
});
</script>
<style>
#nav { width: 500px; background: blue; height: 50px; }
ul { list-style: none; margin: 0; }
#mainWrapper #nav ul li { float: left; margin-right: 40px; }
#slider { width: 500px; background: red; overflow: hidden; }
.codaslider { width: 1500px; background: greenyellow; }
.panel { width: 500px; height: 100px; float: left; }
.panel1 { background: green; }
.panel2 { background: lightblue; }
.panel3 { background: yellow; }
</style>
<title>title</title>
</head>
<body>
<div id="mainWrapper">
<div id="nav">
<ul>
<li class="tab1"><a href="#1">Panel 1</a></li>
<li class="tab2"><a href="#2">Panel 2</a></li>
<li class="tab3"><a href="#3">Panel 3</a></li>
</ul>
</div>
<div id="slider">
<div class="codaslider" id="codaslider5">
<div class="panel panel1">
<h2>Panel 1</h2>
<p>This is panel 1</p>
</div>
<div class="panel panel2">
<h2>Panel 2</h2>
<p>This is panel 2</p>
</div>
<div class="panel panel3">
<h2>Panel 3</h2>
<p>This is panel 3</p>
</div>
</div>
</div>
</div>
</body>
I am trying to use codaslider plugin and it does not work for me. I think I am doing everyhtings right but still its not working. Can someone help me finding out what am I making mistake. Here is my code below. The problem is it does not slide from one panel to antoher. I already went through the documentation but I do not know what is the mistake i am making here.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#codaslider5').codaSlider({
dynamicArrows: false,
dynamicTabs: false
});
});
</script>
<style>
#nav { width: 500px; background: blue; height: 50px; }
ul { list-style: none; margin: 0; }
#mainWrapper #nav ul li { float: left; margin-right: 40px; }
#slider { width: 500px; background: red; overflow: hidden; }
.codaslider { width: 1500px; background: greenyellow; }
.panel { width: 500px; height: 100px; float: left; }
.panel1 { background: green; }
.panel2 { background: lightblue; }
.panel3 { background: yellow; }
</style>
<title>title</title>
</head>
<body>
<div id="mainWrapper">
<div id="nav">
<ul>
<li class="tab1"><a href="#1">Panel 1</a></li>
<li class="tab2"><a href="#2">Panel 2</a></li>
<li class="tab3"><a href="#3">Panel 3</a></li>
</ul>
</div>
<div id="slider">
<div class="codaslider" id="codaslider5">
<div class="panel panel1">
<h2>Panel 1</h2>
<p>This is panel 1</p>
</div>
<div class="panel panel2">
<h2>Panel 2</h2>
<p>This is panel 2</p>
</div>
<div class="panel panel3">
<h2>Panel 3</h2>
<p>This is panel 3</p>
</div>
</div>
</div>
</div>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，我一定在过去一个小时左右的时间里一直在搞这个，想知道为什么它不起作用，因为就像你一样，因为一切看起来都应该没问题。
我想我找到了解决方案。 codaSlider 似乎对您为滑块对象指定的名称很挑剔 - 它们必须包含破折号并且必须按顺序排列。
您的滑块名为“#codaslider5”，您需要将其更改为“#coda-slider-1”（如果您使用 2、3...n 它不起作用 - 大概它希望您实际上拥有滑块 1， 2、3、4（如果您想使用 ID 5）。
我们开始：
更改：
到
下一步，更改：
到
下一步，更改：
到
或者为了懒惰 这是固定文件和diff。
这会扰乱你的 CSS，所以你必须修复它。但希望这能让你重回正轨。
Well, I must have been messing around with this for the past hour or so, wondering why it didn't work because like you because it all looked like it should be fine.
I think I found the solution. It seems to be that codaSlider is picky about the names you give to your slider objects - they must contain dashes and must be in sequential order.
Your slider is named '#codaslider5', you need to change this to '#coda-slider-1' (if you use 2, 3...n it doesn't work - presumably it expects you to actually have sliders 1, 2, 3, 4 if you want to use an ID of 5).
Here we go:
Change:
to
Next, change:
to
Next, change:
to
Or for lazyness here is the fixed file, and the diff.
This will mess with your CSS so you'll have to fix it. But hopefully this gets you back on track.