Home

Awesome

SliderJS

jQuery Slider with CSS Transitions

##Usage

1 - Paste right before your page's closing </body> tag

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="slider.min.js"></script>

2 - From within a script tag or a JS file

Slider.init({
	target: $('.slider'), // domNode to attach to
	time: 6000            // Range for the next transition in milliseconds. Default 5000.
});

##HTML

The HTML structure damn slide is as listed below:

<div class="slider">
    <div class="slider-container">
        <div class="slider-wrapper">
            <div class="slide">
                <!-- html here -->
            </div>
            <div class="slide">
                <!-- html here -->
            </div>
            <div class="slide">
                <!-- html here -->
            </div>
            <div class="slide">
                <!-- html here -->
            </div>
        </div>
    </div>
</div>

##CSS

The minimum CSS slide should be as below:

.slider-container {
    height: 425px; /*The height of the slide*/
    overflow: hidden;
    position: relative;
    width: 990px; /*The width of the slide*/
}

.slider-container .slider-wrapper {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 5000em; /*Fix for prevent display errors*/

    // The range of the transition
    -webkit-transition: all 800ms ease;
       -moz-transition: all 800ms ease;
         -o-transition: all 800ms ease;
            transition: all 800ms ease;
}

.slider-container .slide {
    float: left;
    height: 425px; /*The height of the slide for prevent display errors*/
    overflow: hidden;
    position: relative;
    width: 990px; /*The width of the slide for prevent display errors*/
}

##Compatibility

The transitions occur via CSS in browsers that have support for CSS Transitions, otherwise they are carried through the jQuery animate.

##Browser Support