jquery定制旋转木马内图像缩放模式

Question

我目前的代码是一个图像滑块。当你点击任何图像时，它会在模态窗口中打开一个更大的版本。其值得说的是，我不能使用插件，我已经在这里看过其他Q & A，但答案不是过时就是不适合我的情况。

目前，您无法滑动模式内的较大图像，只能打开/关闭您所在的图像。我想在模态窗口中启用一个滑块，它将从左到右滚动浏览较大的图像。我已经设置了下一个/右键来尝试让它们淡入/淡出下一个/ prev图像，但是他们目前没有做任何事情。

请参阅我创建的jsFiddle以模拟我当前的设置。

JS

$(".product--slider .slide").each(function(index) { 
 
    // Show the modal window 
 
    $('#product-slider-flickity img').click(function() { 
 
    $("#imageshow").html('<img src="' + $(this).attr('src') + '"/>'); 
 
    $(".p-image-zoom").addClass("md-show"); 
 
    }); 
 
}); 
 

 

 
$('.md-close-zoom').click(function() { 
 
    $('.p-image-zoom').removeClass('md-show'); 
 
}); 
 

 
$('#imageshow').click(function() { 
 
    $(".p-image-zoom").removeClass("md-show"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product--slider" id="product-slider-flickity" data-flickity='{ "wrapAround": true, "pageDots": false, "imagesLoaded": true, "draggable": false }'> 
 
    <div class="slide image-1"> 
 
    <img src="http://placekitten.com/1024/1024" /> 
 
    </div> 
 
    <div class="slide image-2"> 
 
    <img src="http://fillmurray.com/1024/1024" /> 
 
    </div> 
 
    <div class="slide image-3"> 
 
    <img src="http://placehold.it/1024x1024" /> 
 
    </div> 
 
</div> 
 

 
<div class="md-modal p-image-zoom"> 
 
    <div class="md-content"> 
 
    <div id='imageshow'></div> 
 
    <button class="md-close-zoom">Close</button> 
 
    </div> 
 
</div> 
 
<div class="md-overlay"></div>

Answer 1

检查什么我已经做了队友，让我知道，如果它的好不好.. https://jsfiddle.net/293sh54n/6/

$('.left').click(function(){ 
    if(activeDivimg < 1){ 
    activeDivimg = 2 
    }else{ 
     activeDivimg = activeDivimg - 1 
    } 
    console.log('left'+activeDivimg) 
    $("#imageshow").html('<img src="'+$('.slide').eq(activeDivimg).find('img').attr('src')+'"/>'); 
     console.log(activeDivimg+"asd") 
    }); 

    $('.right').click(function(){ 
    if (activeDivimg == 2){ 
     activeDivimg = 0 
    }else{ 
     activeDivimg = activeDivimg + 1 
    }