jQueryカルーセル - 任意の数の画像

Question

私は画像/スライドをクリックすると、その画像のズームインされたバージョンを表示するモーダルウィンドウを開く画像のFlickityカルーセルを持っています。そのモーダル内には、ズームインされたすべての画像をスクロールするための左右のボタンがあります。

スライダに3つ以上のイメージがある場合、または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") 
});