slides.js not working

Question

I have HTML which includes scripts in following order

<script src="../static/js/jquery.js" type="text/javascript">
<script src="../static/js/bootstrap.js" type="text/javascript">
<script src="../static/js/slides.js" type="text/javascript">
<script src="../static/js/app.js" type="text/javascript">  

and images are tied to div as

<div id="slideshow">
    <div id="slides">
        <img src="../static/img/slideshow/01.JPG">
        <img src="../static/img/slideshow/02.JPG">
        <img src="../static/img/slideshow/03.JPG">
        <img src="../static/img/slideshow/04.JPG">
        <img src="../static/img/slideshow/05.JPG">
        <img src="../static/img/slideshow/06.JPG">
    </div>
</div>

where jquery.js is JQuery v1.7.2 and slide.js is latest slide.js downloaded.

To me it seems correct order as well. What my app.js does is

$(function(){
    $('#slides').slides({
        width: 600,
        height: 120,
        pagination: false,
        previous: false
    });
    $('#slides').slides("play");
}); 

I tried on both Firefox and Chrome, it doesn't seem to work, all my images are displayed one after the another

What is that I am not doing right here??

Answer 1

You forget some div classes.

You can find a jsfiddle example I put in place here : http://jsfiddle.net/rNF8G/

EDIT 1:

You can add the play: 2000 property to the first block instead of calling it like this : $('#slides').slides("play"); See my edit here : http://jsfiddle.net/rNF8G/1/

EDIT 2:

To remove pagination, all you have to do is to add the following property :

generatePagination: false

You can see it in the following update : http://jsfiddle.net/rNF8G/117/