Question

I am using the SlidesJS plugin to create a slideshow on my home page.

I am looking to put the previous and next buttons outside of the slideshow div so I can left and right align the buttons to the sides of the browser window. Like this:

<div id="slidercontainer">
    <div id="homeslidercontainer">
        <div id="example">
            <div id="slides">
                <div class="slides_container">
                </div>  
            </div>
        </div> 
    </div>
    <a href="#" class="prev"></a>
    <a href="#" class="next"></a>
</div>

Here is the script:

$(function(){
    // Initialize Slides
    $('#slides').slides({
        preload: true,
        preloadImage: 'img/loading.gif',
        generatePagination: false,
        play: 10000,
        pause: 5000,
        hoverPause: true,
        start: 1
    });
});

But when I try it the buttons do not go to the next or previous slides when clicked.
Is there some script var that needs to be included because the buttons are outside of the slider div?

Any help is appreciated!

Answer 1

I don’t know that slide plugin, but I’m using JQuery Tools Scrollable for that and there it is no problem to place them elsewhere and they are used nearly the same way.