Adding navigation buttons below my slider

Question

I created a fade slider with images, text and links. I'd like to add some navigation bullets below it to control the images. like this : http://www.parallaxslider.com/preview_images/skins/bullets_skin.jpg

Here is the slider code:

html

<div class="slides">    

    <div class="slidiv">
<a href="..." ><img src="..." >
        <span> text1 </span></a>
    </div>

    <div class="slidiv">
<a href="..." ><img src="..." >
        <span> text2 </span></a>
    </div>

    <div class="slidiv">
<a href="..." ><img src="..." >
        <span> text3 </span></a>
    </div>

    <div class="slidiv">
<a href="..." ><img src="...">
        <span> text4 </span></a>
    </div>

</div>

CSS

.slides {
overflow:hidden;
top:0;
position:relative;
width:100%;
height:206px;
z-index:920;
border-bottom:white 6px solid;
}

.slides img {
position:absolute;
left:0;
top:0;
}

.slides span {
    position: absolute;
    right: 100px;
    top: 160px;
color:white !important;
font-size:20px;
}

Javascript

<script type="text/javascript">
$(function() {
$('.slides .slidiv:gt(0)').hide();

setInterval(function () {
    $('.slides').children().eq(0).fadeOut(2000)
        .next('.slidiv')
        .fadeIn(2000)
        .end()
        .appendTo('.slides');
}, 6000); // 6 seconds
});
</script>

Answer 1

You have to define a unique id for each slide, then build html for circles (make sure you have a way of referencing which circle matches up to which slide). Then you capture the on click event, clear the interval, cycle forward until the slide in the "current" position matches the circle, then create the interval again. And of course every time it cycles forward you need to set a visual cue for the circle associated with the active slide.

( Demo )

HTML

<div class="slider">
    <div class="slides">
        <div class="slidiv" id="1">
            <a href="...">
                <img src="http://placehold.it/350x150/3296fa/ffffff">
                <span>text1</span>
            </a>
        </div>
        <div class="slidiv" id="2">
            <a href="...">
                <img src="http://placehold.it/350x150/fa9632/ffffff">
                <span>text2</span>
            </a>
        </div>
        <div class="slidiv" id="3">
            <a href="...">
                <img src="http://placehold.it/350x150/ff3399/ffffff">
                <span>text3</span>
            </a>
        </div>
        <div class="slidiv" id="4">
            <a href="...">
                <img src="http://placehold.it/350x150/33ff99/ffffff">
                <span>text4</span>
            </a>
        </div>
    </div>
    <div class="circles">
        <a href="javascript:void()" class="circle active" id="circle-1" data-moveto="1"></a>
        <a href="javascript:void()" class="circle" id="circle-2" data-moveto="2"></a>
        <a href="javascript:void()" class="circle" id="circle-3" data-moveto="3"></a>
        <a href="javascript:void()" class="circle" id="circle-4" data-moveto="4"></a>
    </div>
</div>

CSS

.circles, .circle {
    display: inline-block;
}
.circles {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.circle {
    padding: 5px;
    border-radius: 100%;
    border: 1px solid #444;
}
.active {
    background: rgb(50, 150, 250);
}

JAVASCRIPT

$(function () {
    $('.slides .slidiv:gt(0)').hide();
    $.fn.setActive = function () {
        if ($(this).hasClass("slider")) {
            $(".active", $(this)).removeClass("active");
            $("#circle-" + $(".slidiv:first-child", $(this),$(this)).attr("id"),$(this)).addClass("active");
            return this;
        }
        return false;
    }
    $.fn.cycleFwd = function(rateStart,rateEnd) {
        if ($(this).hasClass("slider")) {
            $('.slides', $(this)).children()
                .eq(0)
                .fadeOut(rateStart)
                .next('.slidiv')
                .fadeIn(rateEnd)
                .end()
                .appendTo($('.slides', $(this)));
            $(this).setActive($('.slidiv:first-child',$(this)).attr("id"));
            return this;
        }
        return false;
    }
    $.fn.cycleFwdTo = function (id,rate) {
        if($(this).hasClass("slider")) {
            var current = $(".slidiv:first-child", $(this));
            if(current.attr("id") === id) return true;
            var count = id;
            if(current.attr("id") > id) {
                count = Number(current.nextAll().length) + Number(id) + 1;
            }
            if(count - current.attr("id") === 1) {
                $(this).cycleFwd(rate,2000);
            } else {
                $(this).cycleFwd(rate,0);
                $(this).cycleFwdTo(id,0);
            }
            return this;
        }
        return false;
    }
    $(".circle").on("click", function () {
        clearInterval(window.interval);
        var newFirst = $(this).attr("data-moveto");
        $(this).parent().parent().cycleFwdTo(newFirst,2000);
        var self = this;
        window.interval = setInterval(function () {
            $(self).parent().parent().cycleFwd(2000,2000);
        }, 6000); // 6 seconds
    });
    $('.slider').each(function(){
        var self = this;
        window.interval = setInterval(function () {
            $(self).cycleFwd(2000,2000);
        }, 6000); // 6 seconds
    });
});

EDIT:

This answer is not very good because it does not very well explain how it works, but this falls into "I could write a novel" explaining all of the different methods of doing what the OP has asked and how each method works. If someone else wanted to come along and offer better explanations of how this code works, I would approve.