个人中心
gpt4 book ai didi

jquery - 无法让 Coda Slider 工作

转载 作者：太空宇宙 更新时间：2023-11-04 00:06:19 24 4
gpt4 key购买 nike

我已经研究了 2 天了。我正在尝试使用 this 设置一个简单的内容 slider jQuery 插件。我想到的 slider 只有 2 个面板(幻灯片)，都应该有固定的高度和宽度。

我根据它的文档尝试过，一无所获。我下载了源代码并剖析了索引页，删除了除 slider 之外的所有其他 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;
}

也许我只是忽略了一些东西。根据文档，它应该非常容易。有人可以告诉我我在这里缺少什么吗？或者更好的是，如果不是太麻烦的话，把一个例子放在一起？我真的很感激!

谢谢。

最佳答案

我从来没有试过那个插件，但是你试过简单地改变

$(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
    });
});

目前您似乎正在尝试在 slider 内创建 slider ，但我从您的问题中感觉到这不是您的预期行为。

添加: 忘记提及也要更改此内容:

<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>

关于jquery - 无法让 Coda Slider 工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14756809/

24 4 0
文章推荐： html - 在设置像素 div 后填充 div 的其余部分
文章推荐： node.js - 当从 Visual Studio 运行 IISExpress 时，我必须采取哪些步骤才能使 IISExpress 运行 iisnode
文章推荐： node.js - 如何用观察者替换订阅者？
文章推荐： html - 如何优雅地对齐复选框
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com