The nothing The nothing - 1 month ago 21
jQuery Question

Loop event click jquery synchronize current status

I tried but I failed, I want to show the next slider image in arrow navigation like this image:

enter image description here

I almost achieved the desired effect but does not work:

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.

Example:
https://jsfiddle.net/t9jw6w4h/

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 > 0) currentItem--;
else currentItem = imgcount - 1;
images[currentItem].show();
});


Can you please tell me where is the error, or give me an idea of how I can achieve effect, thanks for reading.

Answer

I think you should better use currentItem instead another counter, see following:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    body{
      margin: 0px;
      padding: 0px;
      overflow:hidden;
    }
    .conta{margin: 0 auto;
    width: 300px; position:relative;}
    .contasli #next, .contasli #prev{
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    }
    .npconta{position:absolute;z-index:3;
    top: 50%;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    min-height: 70px;
    min-width: 70px;
    overflow: hidden;
    }
    .contasli #prev{background:#ccc;}
    .contasli #next{background:#ccc;}
    .contasli .npconta.left{left:0;}
    .contasli .npconta.right{right:0;}
    #slider img{left: 0;
        position: absolute;
        transition: opacity 1s ease-in-out 0s;
        max-width: 100%;
        width:100%;
      z-index:1;}

      .setimage, .setimageleft{background-position: center center;
    background-size: cover;
    border-radius: 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    }
  </style>
</head>
<body>
<div class="conta">
<div id="slider">
    <img src="http://dummyimage.com/600x400/000/fff&text=1.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=2.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=3.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=4.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=5.jpg" alt="" />
    <br>


</div>

<div class="contasli">
<div class="npconta left">
<div id="prev"><div class="setimageleft"></div></div>
</div>

<div class="npconta right">
<div id="next"><div class="setimage"></div></div>
</div>
</div>

</div>
  <script>
    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] + ')',});

    $('#next').click(function () {
        images[currentItem].hide();
        currentItem = (currentItem + 1) % imgcount;
        images[currentItem].show();
        calcButtons();
    });

    $('#prev').click(function () {
        images[currentItem].hide();
        if (currentItem > 0) currentItem--;
        else currentItem = imgcount - 1;
        images[currentItem].show();
        calcButtons();
    });
    
    function calcButtons(){
      if(currentItem>0)
          $('.setimageleft').css({'background-image':'url(' + imagesrc[currentItem - 1] + ')',});
        else
          $('.setimageleft').css({'background-image':'url(' + imagesrc[imgcount-1] + ')',});
      
      if(currentItem<imgcount-1)
          $('.setimage').css({'background-image':'url(' + imagesrc[currentItem + 1] + ')',});
        else
          $('.setimage').css({'background-image':'url(' + imagesrc[0] + ')',});
    }
  </script>
</body>
</html>

I also centralized the method to calc buttons state, so you don't need to synchronize them. Hope it helps. Bye