How do I make this bullet navigation work in my Jquery slider?

Question

I have a jquery slider made up with ul li that slides with margin-left, I have a good working next and previous button but now I want to add a bullet navigation.

I'm not that good at Jquery and I want to make a click function that when you click on <a id="view1"> it slides to <li id="slide1">,when you click on <a id="view2"> it slides to <li id="slide2"> etc. So I was wondering of anyone knew how to write this click function

I thought I could do it but after 3-4 hours I still couldn't find a good way. I apologize if this is a stupid/nonsense question.

This is My html:

    <div id="slider">
    <ul>
        <li id="slide1"></li>
        <li id="slide2"></li>
        <li id="slide3"></li>
        <li id="slide4"></li>
        <li id="slide5"></li>
    </ul>
    <div class="navigatie">
        <a id="vorige"><img src="prev.jpg"></a>
        <a id="volgende"><img src="next.jpg"></a>
    </div>
</div>
<div id="overview">
     <ul id="ulBullet">
        <li class="bullet1"><a id="view1"></a></li>
        <li class="bullet2"><a id="view1"></a></li>
        <li class="bullet3"><a id="view1"></a></li>
        <li class="bullet4"><a id="view1"></a></li>
        <li class="bullet5"><a id="view1"></a></li>
     </ul>   
</div>

This is my jquery code:

$(document).ready(function(){
var slides = $('#slider ul li');
var slideAantal = slides.length;
var slideBreedte = 1280;
var slideHuidig = 0;

$('#slider ul').css('width', slideAantal * slideBreedte);

$('.navigatie a').click(function() {
    if ($(this).attr('id') == 'volgende') {
        slideHuidig = slideHuidig + 1;
    }
    else {
        slideHuidig = slideHuidig - 1;
    }

    navigatie(slideHuidig);

    $('#slider ul').animate({
        'marginLeft' : (-slideHuidig * slideBreedte)
        });
});

score 0 · Answer 1 · answered Jan 19 '14 at 21:11

Not sure how to use your "navigatie" function as you did not give its sources (thought it had something to do with handling "out-of-bounds" indexes ?), but you seem to use a numeric index in your ids.

Assuming your ids are view1, view2, view3, etc... you should be able to remove the alpha characters from these ids in order to get only the numeric part and use it as the slide index:

$('#overview ul#ulBullet li').on('click', function() {
    var dest_index = $(this).find('a')[0].id;
    dest_index = ~~dest_index.replace("view", "");
    slideHuidig = dest_index - 1;

    $('#slider ul').animate({
        'marginLeft' : (-slideHuidig * slideBreedte)
    });
});

It does not really slides to "slideX" but to the Xth slide.

I actually just got it a minute ago by just assigning different marginLefts to every .bullet class(which is probabely a bad way and much longer then it has to be)& css changes on every click function. But it works fine now. But I'll try this code too thanks! — Noob17, Jan 19 '14 at 22:20

score 0 · Accepted Answer · answered Jan 19 '14 at 22:26

I found a solution but it's probabely the bad way but adding this click function made it work perfect which is what matters to me most!

Feel free to make it shorter or better.

$('.bullet1').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (0)//
        })
            slideHuidig = slideHuidig - slideHuidig;
            $('#vorige').addClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').fadeTo( "slow" , 0.2);
            $('#volgende').fadeTo( "slow" , 0.7);

        $('.bullet1').css("background","#FF0000");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#ccc");


});

$('.bullet2').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-1 * slideBreedte)//
        })
            slideHuidig = 1;
            $('#vorige').removeClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , 0.7);

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#FF0000");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#ccc");


});

$('.bullet3').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-2 * slideBreedte)//
        })
            slideHuidig = 2;
            $('#vorige').removeClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , 0.7);

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#FF0000");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#ccc");

});

$('.bullet4').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-3 * slideBreedte)//
        })
            slideHuidig = 3;
            $('#vorige').removeClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , 0.7);

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#FF0000");
        $('.bullet5').css("background","#ccc");

});

$('.bullet5').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-4 * slideBreedte)//
        })
            slideHuidig = 4;
            $('#vorige').removeClass("disableClick");
            $('#volgende').addClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , "0.2");

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#FF0000");

});

How do I make this bullet navigation work in my Jquery slider?

2 Answers2