There’s a cool JQuery plugin which allows you to slide pieces of HTML one after the other, more than sliding photos, you can slide block of image, text, links and more.
Just give it a go!
http://jquery.malsup.com/cycle/
Example:
The first image
The second image
The third image
The code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function() { // jquery slider business var cycleStart = 0; $('.slideHTML').cycle({ startingSlide: cycleStart, fx: 'scrollHorz', prev: '#Lbut', next: '#Rbut', speed: 500, timeout: 5000, delay: -3000, pause: true, pauseOnPagerHover: true }); }); // ]]></script> |
1 2 3 4 5 6 7 8 | <div class="slideshow"> <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" alt="" width="200" height="200" /> The first image</div> <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" alt="" width="200" height="200" /> The second image</div> <div><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" alt="" width="200" height="200" /> The third image</div> </div> |
Comments
Comments are closed.