无法让Coda Slider工作

时间：2013-02-07 17:05:46

标签： jquery html css jquery-plugins coda-slider

我已经在这2天了。我正在尝试使用this 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;
}

也许我只是在忽视某些事情。根据文档，它应该是非常容易的。有人可以告诉我我在这里失踪了吗？或者更好的是，如果没有太多的麻烦，打一个例子？我真的很感激！

谢谢。

1 个答案:

答案 0 :(得分：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>
相关问题
最新问题