Fork me on GitHub
Go back to Devrama.com

Devrama Slider - jQuery Plugin

'Devrama Slider' is a image slider with many features. It support both images and HTML contents.

Responsive

Automatically,
it resizes
with window size!!

CSS3 Transition Ready

CSS3 Transition
and
jQuery animation as fallback

HTML content inside

<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>
HTML tags in your slide.
Table content 1 Table content 2

Customizable Controls/Navigation

Various Transition Effects

slide
fade
split
door
wave
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

Download v0.9.4

Source Version & Minified Version
Github Change Log

Examples and Codes

Just copy and paste these codes for simple use.

Basic - Images Basic - Links
Transition - Slide Transition - Fade Transition - Split Transition - Door Transition - Wave
Show/Hide Controls/Navigation Positioning Controls Positioning Navigation Coloring Controls/Navigation
Show/Hide Progress Bar Coloring Progress Bar
Customizing Controls/Navigation(Thumbnails)
HTML Content Elements Animation

Features

Responsive
Slider automatically resizes as the parent container resizes. This means Devrama Slider can be used on different sizes of devices.
CSS3 Transition Ready
CSS3 Native transition effect is used when browser support it, otherwise jQuery animate function.
Transition Effects
There are transition effects such as 'slide', 'fade', 'split', 'door', 'wave'
Progress Bar
Progress bar shows a time remaining
HTML content inside a slide
You can use HTML content in the slider instead images.
Advanced Preload/Lazyload
Images are loaded sequentially, and the slide shows as soon as its images are loaded while other images in other slides are being loaded in background process.
Single Javascript file
No css file required.
CSS Customizable(optional)
Previous, Next, Navigation buttons can be customized using CSS.
User defined Navigation/Control available
You can make your own Navigation/Control to control Devrama Slider.
Pause on hover

How to use?

Include jQuery and jquery.devrama.slider.js

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script>

1. Simple Image Slide

See This Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> </head> <body> <!-- data-lazy-src: image url --> <div id="my-slide"> <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> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $('#my-slide').DrSlider(); //Yes! that's it! }); </script>

1. Add <div id="slide-id-name"></div>
2. Inside <div id="slide-id-name">, add <img> tags.
3. Instead of src attribute in <img>, use data-lazy-src.
4. Add this $('#my-slide').DrSlider(); in your javascript code.

2. Simple Linked Image Slide

See This Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> </head> <body> <!-- data-lazy-src: image url --> <div id="my-slide"> <a href="http://devrama.com"><img data-lazy-src="http://devrama.com/static/devrama-slider/images/265740754_141774705b_b.png" /></a> <a href="http://event.devrama.com"><img data-lazy-src="http://devrama.com/static/devrama-slider/images/4247776023_81a3f048ca_b.png" /></a> <a href="http://google.com"><img data-lazy-src="http://devrama.com/static/devrama-slider/images/4277941123_044d26b6df_b.png" /></a> <a href="http://yahoo.com"><img data-lazy-src="http://devrama.com/static/devrama-slider/images/4432435310_d5010f8efc_b.png" /></a> <a href="http://facebook.com"><img data-lazy-src="http://devrama.com/static/devrama-slider/images/6240134386_db0f314ef6_b.png" /></a> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $('#my-slide').DrSlider(); //Yes! that's it! }); </script>

1. Add <div id="slide-id-name"></div>
2. Inside <div id="slide-id-name">, add <a><img></a> tags.
3. Instead of src attribute in <img>, use data-lazy-src.
4. Add this $('#my-slide').DrSlider(); in your javascript code.

3. HTML Content in Slides

See This Example <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.devrama.slider.js"></script> </head> <body> <!-- data-lazy-src: image url data-lazy-background: slide background url --> <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> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $('#my-slide').DrSlider({ width: 1024, //slide width height: 400 //slide height }); //Yes! that's it! }); </script>

1. Add <div id="slide-id-name"></div>
2. Inside <div id="slide-id-name">, add HTML codes surrounded by <div>
3. Add this in your javascript code.   $('#my-slide').DrSlider({
        width: 1024, //replace 1024 by the slide width you want
        height: 400 //replace 400 by the slide height you want
  });
4. Optionally, you can load a background image of the slide using data-lazy-background attribute in the slide block.

Because the slide size cannot be determined with HTML content without a slide image, You should configure width and height.

Configuration

1. Default Configuration Values

$('#my-slide').DrSlider({ width: undefined, height: undefined, userCSS: false, transitionSpeed: 1000, duration: 4000, showNavigation: true, classNavigation: undefined, navigationColor: '#9F1F22', navigationHoverColor: '#D52B2F', navigationHighlightColor: '#DFDFDF', navigationNumberColor: '#000000', positionNavigation: 'out-center-bottom', navigationType: 'circle', showControl: true, classButtonNext: undefined, classButtonPrevious: undefined, controlColor: '#FFFFFF', controlBackgroundColor: '#000000', positionControl: 'left-right', transition: 'slide-left', showProgress: true, progressColor: '#797979', pauseOnHover: true, onReady: undefined });

2. Detail of Configuration Values

Name Default Value Type Available Values Description
width undefined Number e.g.
0, 1, 2, 3, 4…
Slide with images will be automatically detected its width. HTML contents without a background image will need this configuration to render the slider box size. The slider box will be shown in pixel.
height undefined Number e.g.
0, 1, 2, 3, 4…
same as above.
userCSS false Boolen true, false If userCSS is true,this will disable all native CSS of the slider. Then, you can decorate the slider with your own CSS.
transitionSpeed 1000 Number e.g.
0, 1, 2, 3, 4…
Transition effect time between slides in milliseconds.
duration 4000 Number e.g.
0, 1, 2, 3, 4…
Time in milliseconds that the slide stays.
showNavigation true Boolen true, false Show/Hide navigation.
classNavigation undefined String e.g.
'my-navigation',
'my-nav',
'cool-navigation',
'cool-nav'…
User defined navigation. type class name in this value.
navigationColor #9F1F22 String e.g.
'#9F1F22', '#FF0000', '#00FF00'…
Navigation color in regular status.
navigationHoverColor #D52B2F String e.g.
'#9F1F22', '#FF0000', '#00FF00'…
Navigation color in mouse over status.
navigationHighlightColor #DFDFDF String e.g.
'#9F1F22', '#FF0000', '#00FF00'…
Navigation color when its slide is active.
navigationNumberColor #000000 String e.g.
'#9F1F22', '#FF0000', '#00FF00'…
Navigation number text color.
positionNavigation out-center-bottom String out-center-bottom
out-left-bottom
out-right-bottom
out-center-top
out-left-top
out-right-top
in-center-bottom
in-left-bottom
in-right-bottom
in-center-top
in-left-top
in-right-top
in-left-middle
in-right-middle
Positioning the navigation.
navigationType number String number, circle, square Navigation shape
showControl true Boolen true, false Show/Hide Previous-Next controls on hover.
classButtonNext undefined String e.g.
'my-next',
,
'cool-next'…
User defined next button. type class name in this value.
classButtonPrevious undefined String e.g.
'my-previous',
,
'cool-previous'…
Same as above.
controlColor #FFFFFF String e.g.
'#9F1F22', '#FF0000', '#00FF00'…
Next and Previous buttons arrow color.
controlBackgroundColor #000000 String e.g.
'#9F1F22', '#FF0000', '#00FF00'…
Next and Previous buttons background color.
positionControl left-right String left-right
top-center
bottom-center
top-left
top-right
bottom-left
bottom-right
Positioning the control buttons.
transition slide-left String random
slide-left
slide-right
slide-top
slide-bottom
fade
split
split3d
door
wave-left
wave-right
wave-top
wave-bottom
Transition effect between slides.
showProgress true Boolen true, false Show/Hide progress bar
progressColor #797979 String e.g.
'#9F1F22', '#FF0000', '#00FF00'…
progress bar color.
pauseOnHover true Boolen true, false Pause when the mouse is on the slide
onReady undefined Function Callback function when first slide is ready to go. This means that images in first slide are downloaded completely.

Feedback

License

Licensed under the MIT license