infinite slider logic with back and forth button

Question

var i = 1;    
    $('#right').click(function(){
        $('img').attr('src',arr[i]['logo']);
        i++
    });

so far I can only do until here, there are still 2 missing requirements. I want the infinite loop, means it goes back to the 1 when it clicked the 4th item. The other one is the back button.

Look into the modulo operator http://stackoverflow.com/questions/8900652/what-does-do-in-javascript It will let you wrap around from 4 back to 0 — Basic, Mar 09 '15 at 09:19

score 0 · Accepted Answer · answered Mar 09 '15 at 09:30

Here a simple solution for your problem: http://jsfiddle.net/xgpqe4rv/1/. Just put an if statement in to track where you are and reset i when i==3;

 $('img').attr('src',arr[0]['logo']);

    var i = 1;    
        $('#right').click(function(){

            $('img').attr('src',arr[i]['logo']);

            if(i == 3) {

                i=0;
            }
            else {
            i++;

            }
        });
    });

score 0 · Answer 2 · answered Mar 09 '15 at 09:46

Demo

Try this

    var i = 1;    
    $('#right').click(function(){
         if(!$(this).hasClass("active"))
               {
                   i=i+1;
                   $("#left").removeClass("active");
               }
        if(i == 4)
        {
            i=0;
        }
        $('img').attr('src',arr[i]['logo']);
        i++;
        $(this).addClass("active");

    });
    $('#left').click(function(){
            if(!$(this).hasClass("active"))
               {
                   i=i-1;
                   $("#right").removeClass("active");
               }

        if(i == 0)
        {
            i=4;
        }
        $('img').attr('src',arr[i-1]['logo']);
        i--;
        $(this).addClass("active");
    });

infinite slider logic with back and forth button

2 Answers2