Sliders with jQuery

by NicosKaralis

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="slider">
    <div class="slide">
        slide 01
    </div>
    <div class="slide">
        slide 02
    </div>
    <div class="slide">
        slide 03
    </div>
    <div class="slide">
        slide 04
    </div>
    <div class="slide">
        slide 05
    </div>
    <div class="slide">
        slide 06
    </div>
</div>

CSS

#slider {
    background:#ccc;
}
/* slides style */
.slide {
    width: 250px;
    height: 100px;
    float: left;
}
/*--Main Container--*/
#slider {
    float: left;
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height:100px;    
    width: 250px;
    /*--Hides anything outside of the set width/height--*/
    /*overflow: hidden;*/
    position: relative;
}
.slide_reel {
    position: absolute;
    top: 0; left: 0;
}
.slide_reel .slide {
    width:100px;
    height:250px;
    float:left;
}

/*--Paging Styles--*/
.paging {
    position: absolute;
    bottom: 10px; right: -7px;
    width: 178px; height:47px;
    /*--Assures the paging stays on the top layer--*/
    z-index: 100;
    text-align: center;
    line-height: 40px;
    background: url(http://www.sohtanaka.com/web-design/examples/image-slider/paging_bg2.png) no-repeat;
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {
    font-weight: bold;
}

JavaScript

(function($) {
    jQuery.slides = {
        t: 0,
        time: 0,
        ease: ''
    };

    $.fn.slider = function(options) {

        var defaults = {
            width: 250,
            height: 100,
            time: 50,
            ease: 'easeOutBounce',
            vetor: {
                content: 'abc',
                margin: 0
            }
        };
        if (options) {
            options.vetor = $.extend(defaults.vetor, options.vetor);
        }
        var options = $.extend(defaults, options);

        options.time = options.time + 1000;

        $.slides.ease = options.ease;
        $.slides.time = options.time;

        return this.each(function() {
            var o = options;

            var slides = $(this).find('.slide').size();
            var widthMax = o.width * slides;

            $(this).append(createPaginator(slides)).find('.slide').wrapAll('<div class="window" />').wrapAll('<div class="slide_reel" />');

            $(this).find('.paging a:first').addClass('active');

            $(this).css({
                width: o.width,
                height: o.height,
                float: 'left'
            }).find('.window').css({
                width: o.width,
                height: o.height,
                overflow: 'hidden'
            }).find('.slide_reel').css({
                height: o.height,
                width: widthMax
            }).find('.slide').css({
                width: o.width,
                height: o.height,
                float: 'left'
            });

            $(this).bind({
                mouseenter: function() {
                    $(this).parent().parent().stopAutoPlay();
                },
                mouseleave: function() {
                    $(this).parent().parent().startAutoPlay();
                }
            }).find('.paging a').bind({
                click: function() {
                    $(this).rotate();
                    clearTimeout($.slides.t);
                    return...