Question

Hola People...
alguien me podra dar una mano con este problema...
estoy intentando realizar un slider con javascript y jquery(sin ningun plugin adicional )...

<div id="slide">
    <span id="text-1">texto1</span>
    <span id="text-2">texto2</span>
    <span id="text-3">texto3</span>

</div>

#slide span{
    position:absolute;
    width:50%;
    top:0;
    //display:none;
}

    var $img = $('#slide span'),
        n = $img.length,          
        c = 0;                   

    $img.not(':eq('+c+')').hide();

    (function loop(){
      $img.delay(2000).fadeTo(500, 0).eq(++c%n).fadeTo( 1000, 1, loop );
    })();

ahora bien el slider si funciona , el problema cuando quiero agregarle la funcionalidad de paginar... y conseguir ese efecto
que cuando le de click al primer #button1 , que regrese al #text-1 y asi susecivamente, y que continue con el efecto del slider

<div id="spin" >   
    <div id="button1" class="posit" href="" data-id="one"></div>
    <div id="button2" class="posit" href="" data-id="two"></div>
    <div id="button3" class="posit" href="" data-id="three"></div>
</div>

.posit
{
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background-color: black;
    vertical-align: top;
    border: 5px;
    float: left;
    margin: 5px;
}
#spin
{
    position: absolute;
    top: 8%;
    left: 5%;
}

Answer 1

Hola @charlee77 que tal si registras un evento para los elementos, podrías usar el atributo data-* para guardar una relacion entre los slides.

<a id="button1" class="posit" href="" data-slide-btn data-slide-id="text-1">1</a>

$('[data-slide-btn]').on('click', function () {
    var slideID = $(this).data('slide-id'),
        slide;

    if ((slide = $('#' + slideID)).length) {
        slide.fadeIn();
    } 
});