Dot Navigation JQuery Slide Show
<p>I am quite new to JQuery and I have a question about Dot Navigation...</p>

<p>I have some Hero content which I have put together (using posts from here and JQuery site). Basically I have 3 div containers which are hidden and shown in a cycle. I also have three other div containers which have dots in them which I want to use as navigation. During the cycle the dots change colour to represent the "slide" the page is currently on.</p>

<p>What I want to do now is add a click event to each dot so the cycle jumps to and displays the corresponding content.</p>

<p>My Java Script is below.</p>

<pre><code>        $('.heroContBG').each(function() {
        $(this).hide(0);
    });
    $('.heroContBG').first().show(0);
    $('.heroDots').last().removeClass('heroNavOff').addClass('heroNavOn');
    var delay = 6000; //Set delay time
    var divIdx = 0; //Set divIdx value
    var arrDiv = $('.heroContBG').toArray(); //Assign all heroContBG divs to array
    var arrDot = $('.heroDots').toArray(); //Assign all heroDots divs to array
    arrDot = arrDot.reverse(); //Reserve array index for Dot Navigation  

    function heroBG(){
        var $out = $(arrDiv[divIdx]); //Set $out variable to current array index (set by divIdx)
        var $dotOut = $(arrDot[divIdx]); //Set dotOut variable to current array index (set by divIdx)
        divIdx = (divIdx + 1) % arrDiv.length; //Convert array index 0-2 into 1-3
        var $in = $(arrDiv[divIdx]); //Set $in to $arrDix[divIdx]
        var $dotIn = $(arrDot[divIdx]); //Set $dotIn to $arrDot[divIdx]
        $out.fadeOut(600).hide(); //Hide element
        $dotOut.removeClass('heroNavOn').addClass('heroNavOff'); //Swap classes on .heroDots
        $in.fadeIn(1600).show(); //Show next element
        $dotIn.removeClass('heroNavOff').addClass('heroNavOn'); //Swap classes on .heroDots
    }
    setInterval(heroBG, delay); //Tell browser to loop through elements.
</code></pre>

<p>I think what I need to do is have a click event set the divIdx value to match that of the corresponding div container but as yet I have had no luck.</p>

<p>I will keep playing around with this and if I have success I will post it here. If anyone else knows how to do this that would be great.</p>

<p>I should also mention I don't really want to use a 3rd party plugin as I am quite keen to improve my JQuery skills.</p>

<p>Cheers,</p>

<p>Simon</p>
