Implement nav dots to my slider?

Question

I've been messing around with my slider and I got it to slide by itself. The problem is, there is no way you can manually view the slides. I would like to add navigation dots on the bottom so you can skim through the slides without having to view them as the slider goes along. If you could help me with this it would be greatly appreciated.

My slider html:

<div id="slider-container">
<div style="position: relative">
  <div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div>
  <div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div>
  <div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div>
  <div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div>
  <div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div>
  <div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div>
</div>
</div>

My slider css:

.slide-container {
display:block;
}

.slide {
top:0;
width:760px;
height:420px;
display:block;
position:absolute;
transform:scale(0);
transition:all .7s;
}

.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}

My slider javascript:

$(document).ready(function() {
(function (){

    var count = $(".slide > img").length;
    var current = 1;
    var sliderNext = 2;

    $("img[id^='slide_']").fadeOut(0);
    $("#slide_" + current).fadeIn(300);
    var loop = setInterval(function() {
        $("#slide_" + current).fadeOut(300);
        $("#slide_" + sliderNext).fadeIn(300);

        (sliderNext >= count) ? sliderNext = 1 : sliderNext++;
        (current >= count) ? current = 1 : current++;
    }, 3000)
})()
});

Here's an example of what I mean by nav dots:

CSS Slider - Codepen

Solution 1

First create list of dots, you can do it manually by creating list of "li" tags or can create it via jQuery.

here is code

 <ol>
        <li></li>
        <li></li>
        <li></li>
 </ol>

number of "li" element should match with number of images

then have following css

    #slider-container {
        position:relative;
        overflow:hidden;
        width:100%;
        height:380px;
        display:inline-block;
    }

    .slide {
       top:0;
       width:100%;
       display:inline-block;

    }

    .slide img {
       width:100%;
       height:100%;
       border-radius:6px;
       border:1px solid #95ca1a;
    }

/******* css of dots ****/
    ol{
        list-style= none;
        width:100%;
    }
    ol li{
        background: #888;
        border-radius: 50%;
        display: inline-block;
        width:20px;
        height:20px;
        cursor: pointer;
    }

then add following jQuery stuff

$('ol li').bind('click', function(){

        var index = $(this).index() + 1;

        $(".active").fadeOut(300);

        $("#slide_" + index).fadeIn(300);        
        $(".slide").removeClass("active");
        $("#slide_" + index).addClass("active");
});

this code will hide active image and shows selected image

here is Fiddle example

hope it will help you

Solution 2

Here is a carousel script I wrote for a project. This allows you to click forward and backward and also on the dots. It's also dynamic so if you have 1 image, there are no dots or scroll bars, if you have 2 images there are the bars to go right and left but no dots, once you have three or more images the dots will be applied.

JsFiddle

HTML

<div class="carousel-container">
    <div class="left-arrow"></div>
    <div class="right-arrow"></div>
    <div class="carousel-image-holder">
        <img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg" />
        <img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg" />
        <img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg" />
        <img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg" />
    </div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
    <ul></ul>
</div>

CSS

.clear{clear:both;}

.carousel-container{
width: 600px;
height: 360px;
float: left;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}


.right-arrow{
    width: 60px;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    right: 0;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.left-arrow{
    width: 60px;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    margin: 0;
    padding: 0;
    z-index: 2;
}
.carousel-image-holder{
    height:360px;
    width: 2400px;
    margin: 0;
    padding: 0;
    position: absolute; 
    z-index: 1;
}

.carousel-image-holder img{
    width: 600px;
    float: left;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.carousel-buttons-container{
    width: 600px;
    text-align: center;
    margin: 15px 0 0 0;
    padding: 0;
}

    .carousel-buttons-container ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .carousel-buttons{
            background-color: #dddddd;
            height: 18px;
            width: 18px;
            border-radius: 50%;
            display: inline-block;
            margin: 0 10px 0 0;
            padding: 0;
            cursor: pointer;
        }

        .carousel-buttons:last-of-type{
            margin: 0;
        }

        .active{
            background-color: #e67e22;
        }

JQUERY

    $(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;

var addId = numImgs;



if(numImgs == 2){       
    var clicked = 0;
    imgCount = numImgs-2;
}else if(numImgs <= 1){
    $(".right-arrow").hide();       
}else{
    var clicked = 1;        
    imgCount = numImgs-1;
}
if(numImgs > 2){
 for (var i=0; i<numImgs; i++){
$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');
var addId = addId - 1;
  }
}else{

}


$(".carousel-buttons").click(function(){

var findIdClicked = $(this).attr("id");

var splitString = findIdClicked.split("carousel")   
var findTheNumb = splitString[1];

$(".carousel-buttons").removeClass("active");
$(this).addClass("active");
clicked = parseInt(findTheNumb);
 var adjustNumberforSlide = findTheNumb-1;

$(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});        
console.log(clicked);

if(findTheNumb == 1){
    $(".left-arrow").hide();
    $(".right-arrow").show();
}else if (findTheNumb == numImgs){
    $(".right-arrow").hide();
    $(".left-arrow").show();
}else{
    $(".right-arrow").show();
    $(".left-arrow").show();
}
});


$(".carousel-buttons-container").find("li").first().addClass("active"); 


$(".right-arrow").click(function(){

    if (clicked < imgCount){

    $(".carousel-image-holder").animate({"left": "-=600px"});


        console.log(clicked);
    }else{
    $(".carousel-image-holder").animate({"left": "-=600px"});
    $(".right-arrow").hide();

        console.log(clicked);
    }

    clicked = clicked+1;
    $(".left-arrow").show();
    $(".carousel-buttons").removeClass("active");
    $("#carousel"+clicked).addClass("active");

});

$(".left-arrow").click(function(){

    if (clicked > 2){

    $(".carousel-image-holder").animate({"left": "+=600px"});

        console.log(clicked);
    }else{
    $(".carousel-image-holder").animate({"left": "+=600px"});
    $(".left-arrow").hide();

        console.log(clicked);
    }

    $(".right-arrow").show();
    clicked = clicked-1;
    $(".carousel-buttons").removeClass("active");
    $("#carousel"+clicked).addClass("active");


});

I'll clean up the spacing, just wanted to get this posted