Go back to Devrama.com

Demo. Positioning Navigation

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 - outside center-bottom

<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. Outside left-bottom

<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-out-left-bottom"> <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-out-left-bottom').DrSlider({ 'positionNavigation': 'out-left-bottom' }); }); </script> </body> </html>

2. Outside right-bottom

<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-out-right-bottom"> <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-out-right-bottom').DrSlider({ 'positionNavigation': 'out-right-bottom' }); }); </script> </body> </html>

3. Outside center-top

<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-out-center-top"> <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-out-center-top').DrSlider({ 'positionNavigation': 'out-center-top' }); }); </script> </body> </html>

4. Outside left-top

<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-out-left-top"> <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-out-left-top').DrSlider({ 'positionNavigation': 'out-left-top' }); }); </script> </body> </html>

5. Outside right-top

<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-out-right-top"> <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-out-right-top').DrSlider({ 'positionNavigation': 'out-right-top' }); }); </script> </body> </html>

6. Inside center-bottom

<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-in-center-bottom"> <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-in-center-bottom').DrSlider({ 'positionNavigation': 'in-center-bottom' }); }); </script> </body> </html>

7. Inside left-bottom

<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-in-left-bottom"> <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-in-left-bottom').DrSlider({ 'positionNavigation': 'in-left-bottom' }); }); </script> </body> </html>

8. Inside right-bottom

<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-in-right-bottom"> <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-in-right-bottom').DrSlider({ 'positionNavigation': 'in-right-bottom' }); }); </script> </body> </html>

9. Inside center-top

<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-in-center-top"> <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-in-center-top').DrSlider({ 'positionNavigation': 'in-center-top' }); }); </script> </body> </html>

10. Inside left-top

<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-in-left-top"> <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-in-left-top').DrSlider({ 'positionNavigation': 'in-left-top' }); }); </script> </body> </html>

11. Inside right-top

<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-in-right-top"> <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-in-right-top').DrSlider({ 'positionNavigation': 'in-right-top' }); }); </script> </body> </html>

12. Inside left-middle

<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-in-left-middle"> <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-in-left-middle').DrSlider({ 'positionNavigation': 'in-left-middle' }); }); </script> </body> </html>

13. Inside right-middle

<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-in-right-middle"> <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-in-right-middle').DrSlider({ 'positionNavigation': 'in-right-middle' }); }); </script> </body> </html>