Devrama Slider

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

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

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE JS FILES

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

2. HTML

 <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>

3. JAVASCRIPT

$(document).ready(function(){
     $('#my-slide').DrSlider(); //Yes! that's it!
});

4. OPTIONS

$('#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
});

5. EXAMPLES

HTML Content in Slides

HTML

<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>

JAVASCRIPT

$(document).ready(function(){
        $('#my-slide').DrSlider({
            width: 1024, //slide width
            height: 400  //slide height
        }); //Yes! that's it!
});

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