Creación de Plugins jQuery (Slider by Cristian Torres)

1
(function ($) {
2

3
    $.tSlider = function (container, options) {
4
        this.options = {};
5

6
        this.context = container.parent();
7
        container.css('position', 'relative');
8
        this.child = container.children();
9
        this.page = null;
10
        this.pages = [];
11
        this.current = 0;
12
        this.interval = null;
13
        var plugin = this;
14

15
        container.data('slider', plugin);
16

17
        this.next = function () {
18
            plugin.current++;
19
            if (plugin.current >= $('.pointer', plugin.context).size()) plugin.current = 0;
20
            plugin.moveTo(plugin.current);
21
        }
22

23
        this.prev = function () {
24
            plugin.current--;
25
            if (plugin.current < 0) plugin.current = $('.pointer', plugin.context).size() - 1;
26
            plugin.moveTo(plugin.current);
27
        }
28

29
        this.moveTo = function (index) {
30
            clearInterval(plugin.interval);
31
            $('.page.current', plugin.context)
32
                .fadeOut()
33
                .toggleClass('current');
34
            $('.page', plugin.context).eq(index)
35
                .toggleClass('current')
36
                .fadeIn();
37
            $('.pointer.current', plugin.context)
38
                .toggleClass('current');
39
            $('.pointer', plugin.context).eq(index)
40
                .toggleClass('current');
41
            plugin.interval = setInterval(plugin.next, options.autoPlay.interval);
42
        }
43

44
        this.init = function (element, options) {
45
            this.options = $.extend({}, $.tSlider.optionsDefault, options);
46
            var pagination = $('<ul></ul>').addClass(options.pagination.className);
47
            if ((this.child.length / options.pageSize) > 1) {
48
                this.child.each(function (i, v) {
49
                    if (i % options.pageSize == 0) {
50
                        var pageNumber = (i / options.pageSize + 1);
51
                        var pointer = $('
52
<li></li>
53
')
54
                            .append(options.pagination.pointer ? '' : pageNumber)
55
                            .addClass('pointer');
56
                        plugin.page = $('<div></div>')
57
                            .addClass('page')
58
                            .css({
59
                                position: 'absolute',
60
                                top: 0,
61
                                left: 0,
62
                                width: '100%'
63
                            });
64
                        if (pageNumber == options.startPage) {
65
                            plugin.page.addClass('current').css({display: 'block'});
66
                            pointer.addClass('current');
67
                        } else {
68
                            plugin.page.css({display: 'none'});
69
                        }
70
                        plugin.page.append($(v).css('display', 'block'));
71
                        plugin.pages.push(plugin.page);
72

73
                        pointer.bind('click', function () {
74
                            plugin.current = pageNumber - 1;
75
                            plugin.moveTo(plugin.current);
76
                        });
77
                        pagination.append(pointer);
78
                    } else {
79
                        plugin.page.append(v);
80
                    }
81
                });
82
                container.html('').append(plugin.pages).after(pagination.append($('<div class="clearFix"></div>')));
83
                if (options.arrows != false) {
84
                    var nextBtn = $('<div>' + options.arrows.right + '</div>')
85
                        .addClass('next')
86
                        .bind('click', this.next);
87
                    var prevBtn = $('<div>' + options.arrows.left + '</div>')
88
                        .addClass('prev')
89
                        .bind('click', this.prev);
90
                    container
91
                        .after(nextBtn)
92
                        .after(prevBtn);
93
                }
94
            }
95

96
            if (options.autoPlay != false) {
97
                this.interval = setInterval(this.next, options.autoPlay.interval);
98
            }
99
        }
100

101
        this.init(container, options);
102
    }
103

104

105
    $.fn.tSlider = function (options) {
106
        return $(this).each(function () {
107
            (new $.tSlider($(this), options));
108
        });
109
    }
110

111
    $.tSlider.optionsDefault = {
112
        pageSize: 4,
113
        startPage: 1,
114
        arrows: {
115
            left: '<',
116
            right: '>'
117
        },
118
        autoPlay: {
119
            interval: 2000
120
        },
121
        pagination: {
122
            className: 'pagination',
123
            pointer: false
124
        }
125
    }
126
})(jQuery);