title: Loop event click jquery synchronize current status
body: <p>I tried but I failed, I want to show the next slider image in arrow navigation like this image:</p>
  
  <p><a href="https://i.stack.imgur.com/GXsre.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/GXsre.jpg" alt="enter image description here"></a></p>
  
  <p>I almost achieved the desired effect but does not work:</p>
  
  <p>If you to click in the circle right above, number 2 and continue this work, but if you click in the previous circle that is not synchronize with the slider or relation to next arrow.</p>
  
  <p>Example:
  <a href="https://jsfiddle.net/t9jw6w4h/" rel="nofollow">https://jsfiddle.net/t9jw6w4h/</a></p>
  
  <pre><code>  var images = [];
  $('#slider img').each(function () {
      images.push($(this));
      $(this).hide();
  });
  
  var imgcount = images.length;
  var currentItem = 0;
  images[currentItem].show();
  
  var imagesrc = $('#slider').children('img').map(function(){
      return $(this).attr('src')
  }).get()
  
  
  pcounter = imgcount-1;
  $('.setimageleft').css({'background-image': 'url(' + imagesrc[pcounter] + ')',});
  
  ncounter = 1;
  $('.setimage').css({'background-image': 'url(' + imagesrc[ncounter] + ')',});
  
  var imgglobal = 1;
  
  $('#next').click(function () {
      imgglobal++;
      $('.setimage').css({'background-image': 'url(' + imagesrc[imgglobal] + ')',});
      images[currentItem].hide();
      currentItem = (currentItem + 1) % imgcount;
      images[currentItem].show();
  });
  
  $('#prev').click(function () {
      imgglobal--;
      $('.setimageleft').css({'background-image': 'url(' + imagesrc[imgglobal] + ')',});
      images[currentItem].hide();
      if (currentItem &gt; 0) currentItem--;
      else currentItem = imgcount - 1;
      images[currentItem].show();
  });
  </code></pre>
  
  <p>Can you please tell me where is the error, or give me an idea of how I can achieve effect, thanks for reading.</p>