Go back to Devrama.com

Demo. Customzing Controls/Navigation

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. Using CSS

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> <style type="text/css"> /* * CUSTOM CONTROLS */ .example-using-css .devrama-slider .button-slider{ background-color: #0072BB; padding: 0.4em 0.8em; border-radius: 0.4em; border: 1px solid #CCC; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05); color: #FFF !important; text-decoration: none; line-height: 1.2em; cursor: pointer; } .example-using-css .devrama-slider .button-slider:hover{ background-color: #3794CF; } .example-using-css .devrama-slider .button-previous { position: absolute; top: 50%; left: 10px; } .example-using-css .devrama-slider .button-next { position: absolute; top: 50%; right: 10px; } /* * CUSTOM NAVIGATION */ .example-using-css .devrama-slider .navigation { position: absolute; bottom: 13px; left: 10px; } .example-using-css .devrama-slider .navigation .inner .nav-link { background-color: #1C1C1D; border-radius: 3px; padding: 8px; color: #FFF; margin-right: 5px; cursor: pointer; } .example-using-css .devrama-slider .navigation .inner .nav-link:hover { background-color: #3A3A3A; } .example-using-css .devrama-slider .navigation .inner .nav-link.active { background-color: #FFF; color: #000; } /* * CUSTOM PROGRESS BAR */ .example-using-css .devrama-slider .slider-progress { position: absolute; top: 0; left: 0; width: 100%; height: 16px; } .example-using-css .devrama-slider .slider-progress .bar { background-color: rgba(20, 61, 146, 0.61); } </style> </head> <body> <div class="example-using-css"> <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-using-css').DrSlider({ 'userCSS': true }); }); </script> </body> </html>

2. Using your own HTML code

PREVIOUS NEXT
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> <style type="text/css"> /* * CUSTOM CONTROLS */ .go-previous, .go-next { margin: 4px; padding: 5px 10px; border: 1px solid #000; color: #000; border-radius: 7px; text-decoration: none; } /* * CUSTOM NAVIGATION */ .my-navigation{ text-align: center; } .my-navigation img { opacity: 0.3; cursor: pointer; } .my-navigation img.active { opacity: 1; } </style> </head> <body> <div class="example-using-html"> <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> <div style="text-align: center;padding: 10px 0;"> <a href="#" class="go-previous">PREVIOUS</a> <a href="#" class="go-next">NEXT</a> </div> <div class="my-navigation"> <img src="images/265740754_141774705b_b_m.jpg"/> <img src="images/4247776023_81a3f048ca_b_m.jpg"/> <img src="images/4277941123_044d26b6df_b_m.jpg"/> <img src="images/4432435310_d5010f8efc_b_m.jpg"/> <img src="images/6240134386_db0f314ef6_b_m.jpg"/> </div> <script type="text/javascript"> $(document).ready(function(){ $('.example-using-html').DrSlider({ 'showControl': false, 'showNavigation': false, 'classButtonPrevious': 'go-previous', 'classButtonNext': 'go-next', 'classNavigation': 'my-navigation' }); }); </script> </body> </html>

Add data-index attribute in both a slide and a navigation element. Then the navigation element will be linked to the slide with the same index.

<div class="example-using-html"> <img data-index="first-image" 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-index="last-image" data-lazy-src="http://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /> </div> <div class="my-navigation"> <img data-index="first-image" src="images/265740754_141774705b_b_m.jpg"/> <img data-index="last-image" src="images/6240134386_db0f314ef6_b_m.jpg"/> </div>