Submit your widget

Firefox Add-ons center style slideshow with jQuery

Created 8 years ago   Views 23690   downloads 3412    Author htmldrive.net
Firefox Add-ons center style slideshow with jQuery
View DemoDownload 29.1 KB
171
Share |

Usage

 

Add js and css file

 

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

 

Add html code

 

       <div class="scroller" style="width: 600px;">
            <div class="scroller-inner">

                <div class="window">
                    <ol class="teaser-items">
                        <li style="display:block;">
                            <div style="padding:5px; margin:0px; margin:0px;">11111111111111111111111111111111111111111111111111111111</div>
                        </li>
                        <li>
                            <div style="padding:5px; margin:0px;">22222222222222222222222222222222222222222222222222222</div>
                        </li>
                        <li>
                            <div style="padding:5px; margin:0px;">3333333333333333333333333333333333333333333333333</div>
                        </li>
                        <li>
                            <div style="padding:5px; margin:0px;">4444444444444444444444444444444444444444444444444444</div>
                        </li>
                        <li>
                            <div style="padding:5px; margin:0px;">555555555555555555555555555555555555555555555555555</div>
                        </li>
                    </ol>
                </div>
                <div class="teaser-header">
                    <ol>
                        <li class="selected"><a href="[removed];">Section 1</a></li>
                        <li><a href="[removed];">Section 2</a></li>
                        <li><a href="[removed];">Section 3</a></li>
                        <li><a href="[removed];">Section 4</a></li>
                        <li><a href="[removed];">Section 5</a></li>
                    </ol>
                </div><p class="slideshow-controls"><a rel="prev" class="prev active" href="[removed];">Previous</a><a rel="next" class="next active" href="[removed];">Next</a></p></div>
        </div>