Image gallery error, random back button

Question

Image gallery error, random back button

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hello, I have a js that makes a list of images move forward and backward based on a variable, it progresses perfectly, however to return it randomly. Can someone help me solve it? 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: link

javascript html css

asked by anonymous 28.11.2016 / 15:23

2 answers

1

I think there is a simpler solution than that. if you create the elements that symbolize each slideshow item, (which gets lighter once rendered), you'll probably have a structure like this:

link

28.11.2016 / 20:16

Error trying to generate Scaffolding $ _SERVER ['REQUEST_METHOD'] == "POST" Does not work PHP wordpress

score 1 · Accepted Answer

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

prev_three is not being properly initialized:

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

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);
});