Question

I’m using the SlidesJS jQuery plugin and calling

jQuery.slides();

However, this is not working correctly. Instead, the images are just all being displayed (as you would expect without the plugin).

Why isn’t this working and how can I get this to work?

I’m certain the javascript is being ran as I have placed alert() above and below my slides() statement to test.

Here is my markup:

<div class="slides">
    <div class="slides_container">
        <div>
            <img src="Images/sample_banner.png" />
        </div>
        <div>
            <img src="http://placehold.it/984x111" />
        </div>
        <div>
            <img src="http://placehold.it/984x111/ff0000" />
        </div>
    </div>
</div>


 <div class="left_arrow"><a href="#"><img src="Images/left_arrow.png" alt="left arrow control" /></a></div>
 <div class="right_arrow"><a href="#"><img src="Images/right_arrow.png" alt="right arrow control" /></a></div>

Here is my CSS:

.banner
{
    width:984px;
    border-left:solid 7px #FFFFFF;
    border-right: solid 7px #FFFFFF;    
    z-index:1;
    position:relative;
}

    .banner .slides
    {
    }
        .banner .slides .slides_container {
            width:984px;
            height:111px;
        }
            .banner .slides .slides_container div
            {
                width:984px;
                height:111px;
                display:block;
            }


.left_arrow
{
    position:absolute;
    z-index:2;
    width:25px;
    left:0px;
    top:38px;

}

.right_arrow
{
    position:absolute;
    z-index:3;
    width:25px;
    left:960px;
    top:38px;
}

Here is my JS:

$(document).ready(function () {
        $('.slides').slides({
           next: 'right_arrow'
           , prev: 'left_arrow'
           , pagination: false
         });
    });

Answer 1

Even though your question is basically solved. Then there were some other problems with the layout.

1. How can .banner .slides apply, if there is no <div class="banner" /> ?
2. Arrow placements were wrong and their css was not optimal
3. You don’t need to set the width or height on so many places
4. Pagination was still appearing, though you didn’t want it
5. Weird issue with arrows and z-index

And there were more of small issues, that I fixed, made the code optimal and dry.

My example: http://jsfiddle.net/hobobne/RSncf/1/