I am making a slideshow with two right and left buttons and when the buttons are clicked the images src changes and new image es up. The location of the images are stored in an array and ++ operator are used to move the photo next and -- for previous sometimes it does not work I have to double click the buttons to work. Why is this happening ?

HTML

<div class="row">
        <div class="col-xs-1">
            <a href="" id="left"><img src="images/left.png" width="80px"    height="80px"></a>
        </div>
        <div class="col-xs-6">
            <img src="images/1.jpg" id="image">
        </div>
        <div class="col-xs-1">
            <a href="" id="right"><img src="images/right.png" width="80px"  height="80px"></a>
        </div>
    </div>

Jquery

var count = 1;

        var imagesLocation = ['images/1.jpg',
                              'images/2.jpg',
                              'images/3.jpg',
                              'images/4.jpg',
                              'images/5.jpg'];

        $('#right').on('click',function(e){
            e.preventDefault();
            if(count < 6){
                $('#image').attr('src',imagesLocation[count]);
                count++;
            }
        });

        $('#left').on('click',function(e){
            e.preventDefault();
            count--;
            $('#image').attr('src',imagesLocation[count]);

        });

I am making a slideshow with two right and left buttons and when the buttons are clicked the images src changes and new image es up. The location of the images are stored in an array and ++ operator are used to move the photo next and -- for previous sometimes it does not work I have to double click the buttons to work. Why is this happening ?

HTML

<div class="row">
        <div class="col-xs-1">
            <a href="" id="left"><img src="images/left.png" width="80px"    height="80px"></a>
        </div>
        <div class="col-xs-6">
            <img src="images/1.jpg" id="image">
        </div>
        <div class="col-xs-1">
            <a href="" id="right"><img src="images/right.png" width="80px"  height="80px"></a>
        </div>
    </div>

Jquery

var count = 1;

        var imagesLocation = ['images/1.jpg',
                              'images/2.jpg',
                              'images/3.jpg',
                              'images/4.jpg',
                              'images/5.jpg'];

        $('#right').on('click',function(e){
            e.preventDefault();
            if(count < 6){
                $('#image').attr('src',imagesLocation[count]);
                count++;
            }
        });

        $('#left').on('click',function(e){
            e.preventDefault();
            count--;
            $('#image').attr('src',imagesLocation[count]);

        });

• javascript
• jquery
• increment

• 2 javascript array indetx starts at 0 – rrk Commented Aug 11, 2015 at 11:26

2 Answers 2

Array index is starting from 0 not 1

var count = 0;
//----------^--- update here

var imagesLocation = ['images/1.jpg',
  'images/2.jpg',
  'images/3.jpg',
  'images/4.jpg',
  'images/5.jpg'
];

$('#right').on('click', function(e) {
  e.preventDefault();
  if (count < imagesLocation.length) {
    //--------^----- .length can be use instead, so this will work even if array size changed
    $('#image').attr('src', imagesLocation[++count]);
    //-------------------------------------^--  ++count will increment the count, then returns the incremented count value    
  }
});

$('#left').on('click', function(e) {
  e.preventDefault();
  if (count > 0) {
    //------^---- to avoid negative index    
    $('#image').attr('src', imagesLocation[--count]);
    //-------------------------------------^--  --count will decrements the count, then returns the decremented count value
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-1">
    <a href="" id="left">
      <img src="images/left.png" width="80px" height="80px">
    </a>
  </div>
  <div class="col-xs-6">
    <img src="images/1.jpg" id="image">
  </div>
  <div class="col-xs-1">
    <a href="" id="right">
      <img src="images/right.png" width="80px" height="80px">
    </a>
  </div>
</div>

Try This...

    var count = 0;

    var imagesLocation =      ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];

    $('#right').on('click', function(e) {
      e.preventDefault();
      if (count < 5) {
    $('#image').attr('src', imagesLocation[count]);
     count++;
     }
    });

    $('#left').on('click', function(e) {
      e.preventDefault();
      count--;
    $('#image').attr('src', imagesLocation[count]);

    });

Array index starts from 0...