Error in image gallery, return random button

Question

Hello, I have a js that makes a list of images move forward and backward based on a variable, it advances perfectly, but to return it returns randomly. Can anyone help me solve? the code is below:

var imgs = [
  'produtos/Slide92.png',
  'produtos/Slide93.png',
  'produtos/Slide94.png',

];
var num_imgs = 1;
var next_three = num_imgs;
var prev_three = 0;
var next_imgs, prev_imgs;
for(var i = 0; i < next_three; i++) {
    $('#galery').append('<img class="imgDinamica" src="' +imgs[i]+ '">');
}
$('#next').on('click', function() {
  next_imgs = imgs.slice(next_three, next_three + num_imgs);
  if(next_imgs.length === 0) {
    next_three = 0;
    next_imgs = imgs.slice(next_three, next_three + num_imgs);
  }
  $('.imgDinamica').each(function() {
    if(typeof next_imgs[$(this).index()] === 'undefined') {
        $(this).hide();
        return true; // continue
    }
    $(this).show();
    $(this).prop('src', next_imgs[$(this).index()]);
  });
  next_three += num_imgs;
});

$('#prev').on('click', function() {
    prev_imgs = imgs.slice(prev_three - num_imgs, prev_three);
  console.log(prev_three);
  if(prev_imgs.length <= 0) {
        prev_three = imgs.length;
    prev_imgs = imgs.slice(prev_three - num_imgs, prev_three);
  }
  $('.imgDinamica').each(function() {
    if(typeof prev_imgs[$(this).index()] === 'undefined') {
        $(this).hide();
        return true; // continue
    }
    $(this).show();
    $(this).prop('src', prev_imgs[$(this).index()]);
  });
  prev_three -= num_imgs;
});

The original code is this: https://jsfiddle.net/bwoep3wL/2/

Answer 1

1. #next.click does not update prev_three nor #prev.click updates next_three;

2. prev_three not to be properly initialized:

   var prev_three=imgs.length-imgs.length%num_imgs;

3. algorithm in general.

I suggest using a single position variable, modified according to the movement:

var imgs = [...];

var num_imgs = 3;
var cur_img = 0;

function upd_imgs(index, count) {
  //Garantir que existem count elementos
  while($('.img_change').length<count) $('#imgs_wrapper').append("<img class='img_change'>");
  //Corrigir count se superior a elementos disponíveis
  if (index+count>imgs.length) count=imgs.length-index;
  $('.img_change').each(function() {
    if ($(this).index()>=count) {
      //Ocultar elementos extra contagem
      $(this).hide();
    } else {
      //Atualizar src e mostrar imagens
      this.src=imgs[index+$(this).index()];
      $(this).show();
    }
  });
}

//Primeira atualização
upd_imgs(cur_img, num_imgs);

$('#next_imgs').on('click', function() {
  cur_img=cur_img+num_imgs;
  if (cur_img>=imgs.length) cur_img=0;
  upd_imgs(cur_img, num_imgs);
});

$('#prev_imgs').on('click', function() {
  cur_img=cur_img-num_imgs;
  if (cur_img<0) cur_img=imgs.length-imgs.length%num_imgs;
  upd_imgs(cur_img, num_imgs);
});

Answer 2

I believe there is a simpler solution than that. if you create the elements that symbolize each slideshow item, (which is lighter after processing), you probably have a structure like this:

https://jsfiddle.net/tq6gen43/4/