https://redalyc.org/js/slider.js

1/*
2    Name: Slider
3    Plugin Url: https://github.com/umkka/carousel
4    Author: Umkka 
5    Author Url: http://umkka.net  
6    Year: 2016
7*/
8
9(function($){
10	$.noConflict();
11
12jQuery.fn.rbtSlider = function(opt){
13        return this.each(function() {
14            var slider = $(this);
15            if (opt.height) slider.css('height', opt.height);
16            slider.find('.slItem').first().addClass('active');
17            if (opt.dots) {
18                var count = slider.find('.slItem').length;
19                slider.append(
20                    $('<div/>', {
21                        class: 'slDots',
22                        html: $('<div/>', {
23                            class: 'slDotsSingle active'
24                        })
25                    })                                  
26                );
27                for (var i = 1; i < count; i++) {
28                    slider.find('.slDotsSingle.active').clone().removeClass('active').appendTo($(this).find('.slDots'));    
29                }
30                slider.find('.slDotsSingle').on('click', function(){
31                    curIndex = $(this).parents('.slDots').find('.active').removeClass('active').index() + 1;
32                    index = $(this).addClass('active').index() + 1;
33                    if (index != curIndex) {
34                        if (index > curIndex) nav('next', index);
35                        else nav('prev', index);
36                    }
37                });
38            }
39            if (opt.arrows) {
40                slider.append(
41                    $('<div/>', {
42                        class: 'ctrlPrev',
43                        html: '&lsaquo;'
44                    }).on('click', function(){
45                        nav('prev');
46                    })
47                ).append(
48                    $('<div/>', {
49                        class: 'ctrlNext',
50                        html: '&rsaquo;'
51                    }).on('click', function(){
52                        nav('next');
53                    })
54                );
55            }
56            if (opt.auto) {
57                var time = setInterval(function(){nav('next')}, opt.auto * 1000);
58                slider.on('mouseover', function() {
59                    clearInterval(time);
60                }).on('mouseleave', function() {
61                    time = setInterval(function(){nav('next')}, opt.auto * 1000);
62                });
63            }
64
65            function nav(side, index) {
66                if (index) {
67                    nextItem = slider.find('.slItem').eq(index - 1);
68                } else {
69                    if (side == 'prev') {
70                        if (slider.find('.slItem.active').prev().length) nextItem = slider.find('.slItem.active').prev();  
71                        else nextItem = slider.find('.slItem').last();
72                    } else {
73                        if (slider.find('.slItem.active').next().length) nextItem = slider.find('.slItem.active').next();
74                        else nextItem = slider.find('.slItem').first();
75                    }    
76                    slider.find('.slDots > .active').removeClass('active').parent().find('.slDotsSingle').eq(nextItem.index()).addClass('active');
77                }
78                nextItem.addClass(side + 'Item').delay(50).queue(function(){
79                    slider.find('.slItems > .active').addClass(side).delay(700).queue(function(){
80                        $(this).removeClass(side +' active').dequeue();
81                    });
82
83                    $(this).addClass(side).delay(700).queue(function(){
84                        $(this).removeClass(side + ' ' + side + 'Item').addClass('active').clearQueue();
85                    });
86
87                    $(this).dequeue();
88                });
89            }
90        });
91    };
92    
93})(jQuery);