Go back to Devrama.com

Demo. Transition - split

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

1. Split

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> </head> <body> <div class="example-split"> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-split').DrSlider({ 'transition': 'split' }); }); </script> </body> </html>

2. Split3d

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> </head> <body> <div class="example-split3d"> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="http://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-split3d').DrSlider({ 'transition': 'split3d' }); }); </script> </body> </html>