Go back to Devrama.com

Demo. Positioning Controls

Photo credit in slides
https://www.flickr.com/photos/rieorie/4277941123/
Some rights reserved by rieh
https://www.flickr.com/photos/sen_meister/4432435310/
Some rights reserved by Mario Spann
https://www.flickr.com/photos/clkg/4247776023/
Some rights reserved by alluréd
https://www.flickr.com/photos/instantvantage/6240134386/
Some rights reserved by Instant Vantage
https://www.flickr.com/photos/eschipul/265740754/
Some rights reserved by eschipul

0. Default Position

<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-default"> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-default').DrSlider(); }); </script> </body> </html>

1. Top Center

<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-top-center"> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-top-center').DrSlider({ 'positionControl': 'top-center' }); }); </script> </body> </html>

2. Bottom Center

<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-bottom-center"> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-bottom-center').DrSlider({ 'positionControl': 'bottom-center' }); }); </script> </body> </html>

3. Top Left

<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-top-left"> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-top-left').DrSlider({ 'positionControl': 'top-left' }); }); </script> </body> </html>

4. Top Right

<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-top-right"> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-top-right').DrSlider({ 'positionControl': 'top-right' }); }); </script> </body> </html>

5. Bottom Left

<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-bottom-left"> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-bottom-left').DrSlider({ 'positionControl': 'bottom-left' }); }); </script> </body> </html>

6. Top Right

<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-bottom-right"> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /> <img data-lazy-src="https://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-bottom-right').DrSlider({ 'positionControl': 'bottom-right' }); }); </script> </body> </html>