Implement nav dots to my slider?

css, html, javascript, jquery, slider

Solution

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

Problem

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

Original source