Hi, Im looking for a tiny script that does the following! PREV BUTTON (Div with images 100X100px max 4 images visable) NEXT BUTTON Code (markup): Can anyone write me a tiny piece of jQuery animate code for prev/next button? I've tried alot but i'm not realy into jQuery My code try <!DOCTYPE html> <html lang="en"> <head> <title>.animate() – jQuery API</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#scrollit').click(function() { var divOffset = $('#scrollable').offset().top; var pOffset = $('#scrollable p:eq(2)').offset().top; var pScroll = pOffset - divOffset; $('#scrollable').animate({scrollTop: '+=' + pScroll + 'px'}, 1000, 'bounceout'); }); }); imageIndex = 0; imageIndexMax = 8; function scrollPrev() { if (imageIndex > 0) { imageIndex--; } scrollImages(); } function scrollNext() { if (imageIndex < imageIndexMax) { imageIndex++; } scrollImages(); } function scrollImages() { $('#scrollable').animate({left: '+=' + 100 + 'px'}, 1000, ''); } </script> </head> <body> <a href="javascript:scrollPrev();" style="float: left;"><<</a> <div style="float: left;"> <div id="scrollable" style="width: 400px; height: 100px; overflow: hidden;"> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">1</a> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">2</a> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">3</a> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">4</a> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">5</a> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">6</a> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">7</a> <a href="#" style="float: left; width: 100px; height: 100px; text-align: center;">8</a> </div> </div> <a href="javascript:scrollNext();" style="float: left;">>></a> </body> </html> Code (markup):
Something like this: http://jqueryfordesigners.com/demo/infinite-carousel.html But i think it could be with less javascript/jquery and i'd like to move one image each time a button is clicked!