javascript - jQuery 轮播 - 任意数量的图像

Question

我有一个 Flickity 图像轮播，当您单击图像/幻灯片时，它会打开一个模式窗口以显示该图像的放大版本。在那个模式中，我有一个左右按钮来滚动浏览所有放大的图像。

我的问题是，如果 slider 中的图像多于或少于 3 个，我的代码就会中断。我需要转换它，这样无论我有多少图像，无论是 1、4、2 还是 8 等，它都不会损坏。我该怎么做？

我在下面的 JS 已被缩减以仅显示相关位。我也有一个右键功能。目前情况见jsFiddle:https://jsfiddle.net/293sh54n/6/

JS

var activeDivimg;
$( ".product--slider .slide" ).each(function( index ) {
  // Show the modal window
  $('#product-slider-flickity img').click(function(){
    activeDivimg = parseInt($(this).parent().index());
    console.log(activeDivimg)
    $("#imageshow").html('<img src="'+$(this).attr('src')+'"/>');
    $(".p-image-zoom").addClass("md-show");
  });
});
// Zoomed in controls - Scroll left button
$('.left').click(function(){
   if(activeDivimg < 1 ){
    activeDivimg = 2
   }else{
      console.log('kundi'+activeDivimg)
      activeDivimg = activeDivimg - 1
   }
   console.log('left'+activeDivimg)
   $("#imageshow").html('<img src="'+$('.slide').eq(activeDivimg).find('img').attr('src')+'"/>');
    console.log(activeDivimg+"asd")
});

Answer 1

首先，您应该对图像进行计数。在左键单击之后，您使用 activeDivimg = imagesCount - 1;而不是 activeDivimg = 2;同样的事情右键单击。 fiddle

var imageCount = $('.slide').length;
var activeDivimg;
$( ".product--slider .slide" ).each(function( index ) {
  // Show the modal window
  $('#product-slider-flickity img').click(function(){
    activeDivimg = parseInt($(this).parent().index());
    console.log(activeDivimg)
    $("#imageshow").html('<img src="'+$(this).attr('src')+'"/>');
    $(".p-image-zoom").addClass("md-show");
  });
});
// Zoomed in controls - Scroll left button
$('.left').click(function(){
   if(activeDivimg < 1 ){
    activeDivimg = imagesCount - 1;
   }else{
      console.log('kundi'+activeDivimg)
      activeDivimg = activeDivimg - 1
   }
   console.log('left'+activeDivimg)
   $("#imageshow").html('<img src="'+$('.slide').eq(activeDivimg).find('img').attr('src')+'"/>');
    console.log(activeDivimg+"asd")
});