Go back to Devrama.com

Demo. HTML Content

HTML content inside

HTML tags in your slide.
Table content 1 Table content 2

HTML content inside

Photo credit in slides
http://www.flickr.com/photos/rieorie/4277941123/
Some rights reserved by rieh
http://www.flickr.com/photos/sen_meister/4432435310/
Some rights reserved by Mario Spann
http://www.flickr.com/photos/clkg/4247776023/
Some rights reserved by alluréd
http://www.flickr.com/photos/instantvantage/6240134386/
Some rights reserved by Instant Vantage
http://www.flickr.com/photos/eschipul/265740754/
Some rights reserved by eschipul
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> <style type="text/css"> #my-slide { color: #FFF; text-align: center; } #my-slide table{ margin: 0 auto; width: 80%; border: 1px solid #fff; } #my-slide table th, #my-slide table td{ padding: 5px 15px; border: 1px solid #fff; } #my-slide table td{ height: 200px; vertical-align: middle; } </style> </head> <body> <div id="my-slide"> <!-- First Slide ---------------------------------------------> <div style="background-color:#27446F;"> <h3>HTML content inside</h3> <table> <thead> <th colspan="2">HTML tags in your slide.</th> </thead> <tbody> <tr> <td>Table content 1</td> <td>Table content 2</td> </tr> </tbody> </table> </div> <!-- Second Slide ---------------------------------------------> <div data-lazy-background="http://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png"> <h3>HTML content inside</h3> <img src="http://www.gravatar.com/avatar/fe3f1273001cb2e9ed9c9b067fcb1fd4?s=200"/> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('#my-slide').DrSlider({ width: 1024, //slide width height: 400 //slide height }); //Yes! that's it! }); </script> </body> </html>