How to make a slider using jquery using other kind of functons
<p>Hello I finished my slider with jquery and bullets but I want to learn more about this, about functions of jquery and new posibilities and styles of programming, I wil leave my source code here and if someone can change it a bit, for example here</p>

<pre><code>$(".slider").on("click","button.before",function(){
        var div = this;
        div = $(div).parent();
        console.log(div);
        flechas({div:div});
    });
</code></pre>

<p>I read that there's a function on jquery like this </p>

<pre><code>`$(".slider").on("click",function(){

});
</code></pre>

<p>here you don't need to use 2 variables, well my question is how can I change this, in my source code I use button to back or next on the photos but I want to use <code>&lt;a href="#"&gt;</code> with class, for example, I want to see other posibilities to improve my code</p>

<p>Html code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Slider&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;    
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;script src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/slider.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="sliders"&gt;
    &lt;ul &gt;
        &lt;li class="activa"&gt;&lt;img src="fotos-de-Hamburguesa-americana.jpg"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images (3).jpg"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images21312.jpg"&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;!--    &lt;ul class="controles"&gt;
        &lt;li class="activa"&gt;&amp;nbsp&lt;/li&gt;
        &lt;li&gt;&amp;nbsp&lt;/li&gt;
        &lt;li&gt;&amp;nbsp&lt;/li&gt;
    &lt;/ul&gt; --&gt;
&lt;/div&gt;
&lt;div class="sliders"&gt;
    &lt;ul&gt;
        &lt;li class="activa"&gt;&lt;img src="fotos-de-Hamburguesa-americana.jpg"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="images (3).jpg"&gt;&lt;/li&gt;
&lt;!--        &lt;li&gt;&lt;img src="images21312.jpg"&gt;&lt;/li&gt; --&gt;
    &lt;/ul&gt;   

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt; 
</code></pre>

<p>Js code:</p>

<pre><code>    $.fn.slider = function(config){
    var nodos = this;
    var delay = (typeof config.delay == "number")?parseInt(config.delay):4000;
    for (var i = 0; i &lt; nodos.length; i++) {
        Slider(nodos[i]);
    }
    function Slider(nodo){
        var galeria = $(nodo).find('ul');
        var btn1 = "&lt;button class='before'&gt;&lt;/button&gt;";
        if(!$(nodo).hasClass('slider'))
        $(nodo).addClass('slider');

        if(!galeria.hasClass('galeria'))
        galeria.addClass("galeria");

        //Encontrar cuantas imagenes hay en la galeria
        var imagenes = $(galeria).find('li');

        //Controles
        var html_bullets="&lt;ul class='controles'&gt;";
        for (var it = 0; it &lt; imagenes.length; it++) {
            if(it==0)
            html_bullets+="&lt;li data-index='"+it+"' class='activa'&gt;&amp;nbsp;&lt;/li&gt;";
            else    
            html_bullets+="&lt;li data-index='"+it+"'&gt;&amp;nbsp;&lt;/li&gt;";
        }

        html_bullets+="&lt;/ul&gt;&lt;button class='next'&gt;&lt;/button&gt;";
        $(nodo).append(html_bullets);
        $(nodo).prepend(btn1);
        var bullets = $(nodo).find("ul.controles li");
        bullets.click(function(){
        var index= $(this).data("index");
        bullets.removeClass('activa');
        imagenes.removeClass('activa');
        $(imagenes[index]).addClass("activa");  
        $(bullets[index]).addClass("activa");   
        });
    }
        $(".slider").on("click","button.before",function(){
            var div = this;
            div = $(div).parent();
            console.log(div);
            flechas({div:div});
        });
        $(".slider").on("click","button.next",function(){
            var div = this;
            div = $(div).parent();
            flechas({div:div,direccion:1});
        }); 

        function flechas(tipo){
            var div = tipo.div;
            var imagen = $(div).find("ul.galeria li.activa");
            var imagenes = $(div).find("ul.galeria li");
            var bullet = $(div).find("ul.controles li.activa");
            var bullets = $(div).find("ul.controles li");
            var index = bullet.data("index");
            var max = bullets.length-1;
            bullets.removeClass('activa');
            imagenes.removeClass('activa');
        if(tipo.direccion){
            if(index == max){
            $(imagenes[0]).addClass("activa");  
            $(bullets[0]).addClass("activa");   
            }else {
            $(imagenes[index+1]).addClass("activa");    
            $(bullets[index+1]).addClass("activa"); 
            }   
        }
        else{
            if(index == 0){
            $(imagenes[max]).addClass("activa");    
            $(bullets[max]).addClass("activa"); 
            }else {
            $(imagenes[index-1]).addClass("activa");    
            $(bullets[index-1]).addClass("activa"); 
            }
        }

        }   
};

$(document).ready(function() {
$(".sliders").slider({delay:5000});




});
</code></pre>

<p>css code:</p>

<pre><code>    .slider{
    width: 420px;
    overflow: hidden;
}

.slider ul{
    list-style: none;
    padding: 0; 
}

.slider ul.galeria{
    height: 200px;
    position: relative;
    margin-left: 30px;
}

.slider ul.galeria li{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 2s;
}

.slider ul.galeria li.activa{
    opacity: 1;
}

.slider ul.galeria img{
    max-height: 200px;
    margin-left: 5px;   
}

/*Controles*/
.slider ul.controles {
    text-align: center;
}

.slider ul.controles li{
    background-color: black ;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
.slider ul.controles li.activa{
    background-color: blue ;
}
/*Botones-flechas*/
.slider button.before{
    background-image: url(Flecha_002.png);
    position: relative;
    left: 0;
    top: 128px;
    background-repeat: no-repeat;
    background-size: 28px;
    height: 48px;
    width: 33px;
    background-color: white;
    border: none;
}
.slider button.next{
    background-image: url(Flecha_001.png);
    position: relative;
    left: 86%;
    bottom: 190px;
    background-repeat: no-repeat;
    background-size: 28px;
    height: 48px;
    width: 33px;
    background-color: white;
    border: none;
}   
.slider button.before:focus{
    outline: none;
}   
.slider button.next:focus{
    outline: none;
}
.slider button.before:hover,.slider button.next:hover,.slider ul.controles li:hover{
    cursor: pointer;
}       
</code></pre>