Question

im new to jquery. and im trying to put a slideshow plugin to my site. i encountered this “slidesjs” plugin which i tried putting in my page but it doesnt seem to work. here’s my code:

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

i just downloaded theyr plugin. which is in “slides” folder. i transfered this folder just inside the folder where my html files are located too.

Answer 1

You have no element with an id of “slides,” so the selector isn’t finding anything to transform. Try:

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

instead.

EDIT: If you’re simply implementing a copy of one of the examples, make sure you include the associated resources. For instance, if you’re using the sample code for the Standard example, you need the js, css, and img folders (and their contents) to get the same look. You can (and should) replace these with your own styling and images once you understand the way the example is setup.