Slidesjs插件

Question

我对jquery很新。我试图将幻灯片插件放到我的网站上。我遇到了这个“slidesjs”插件，我尝试将其放入我的页面，但它似乎无法正常工作。这是我的代码：

<style type="text/css" media="screen">
        .slides_container {
            width:570px;
            height:270px;
        }
        .slides_container div {
            width:570px;
            height:270px;
            display:block;
        }
    </style>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="Slides/examples/images-with-captions/js/slides.min.jquery.js"></script>

    <script>
        $(function(){
            $("#slides").slides();
        });
    </script>

<div id="text-contents">
        <div class="slides_container">
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
            <div>
                <img src="http://placehold.it/570x270">
            </div>
        </div>
</div>

我刚下载了他们的插件。它位于“幻灯片”文件夹中。我将文件夹转移到我的html文件所在的文件夹中。

Answer 1

您没有id个“幻灯片”的元素，因此选择器找不到任何要转换的内容。尝试：

$("#text-contents").slides();

代替。

编辑：如果您只是实现其中一个示例的副本，请确保包含相关资源。例如，如果您使用标准示例的示例代码，则需要js，css和img文件夹（及其内容）得到相同的外观。一旦理解了示例的设置方式，您就可以（并且应该）用自己的样式和图像替换它们。

Answer 2

嗨看看https://github.com/brenelz/Content-Slider，如果没有基本的JQuery滑块，它可以满足您的需求。