previous-next slideshow - simple and practical image slideshow jQuery plugin

Demo1

Demo2

Demo3

Usage

Include js and css files.

<link href="css/previousnext.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/previousnext.js"></script>

Add html.

        <div id="previousnext_slideshow" class="previousnext_slideshow">
            <ul>
                <li><a href="#" title="#"><img src="images/1.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
                <li><a href="#" title="#"><img src="images/2.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
                <li><a href="#" title="#"><img src="images/3.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
                <li><a href="#" title="#"><img src="images/4.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
            </ul>
            <ul class="slideshow_nav"><li class="slideshow_nav_previous"></li><li class="slideshow_nav_next"></li></ul>
            <div style="clear: both"></div>
        </div>

Add startup script.

        <script language="javascript" type="text/javascript">
            $(function() {
                $("#previousnext_slideshow").previousnext_slideshow({
                    slideshow_time_interval: '2000',
                    slideshow_window_background_color: "#ccc",
                    slideshow_window_padding: '1',
                    slideshow_window_width: '300',
                    slideshow_window_height: '150',
                    slideshow_window_border_size: '1',
                    slideshow_window_border_color: '#999',
                    slideshow_button_style: '1',//options: 1,2,3
                    directory: 'images'
                });
        </script>