Карусель с лифтом Zoom

Question

У меня есть карусель (slick.js) для изображений продуктов, и я пытаюсь реализовать масштабирование этих изображений, независимо от того, какое изображение активно в карусели. Я вижу только последнее изображение в карусель в контейнере масштабирования, вот мой код.

HTML

<ul class="image-carousel"> 
    <li> 
     <img src="/image1.png" data-zoom-image="/image1-large.jpg" class="zoom"> 
    </li> 
    <li> 
     <img src="/image2.png" data-zoom-image="/image2-large.jpg" class="zoom"> 
    </li> 
    <li> 
     <img src="/image3.png" data-zoom-image="/image3-large.jpg" class="zoom"> 
    </li> 
    <li> 
     <img src="/image4.png" data-zoom-image="/image4-large.jpg" class="zoom"> 
    </li> 
</ul> 

JS

$(".image-carousel").slick(); 
$(".zoom").elevateZoom(); 

Answer 1

Вы можете использовать код, как это приведено ниже.

@{ 
    ViewBag.Title = "Contact"; 
    Layout = null; 
} 
<script src="~/Scripts/jquery-1.8.3.min.js"></script> 

<link href="~/Scripts/slick.css" rel="stylesheet" /> 
<script src="~/Scripts/slick.min.js"></script> 
<script src="~/Scripts/jquery.elevatezoom.js"></script> 

<ul class="image-carousel"> 
    <li> 
     <img id="zoom_01" class="zoom" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg" /> 
    </li> 
    <li> 
     <img class="zoom" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg" /> 
    </li> 
    <li> 
     <img class="zoom" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg" /> 
    </li> 
</ul> 



<script> 
    $(document).ready(function() { 
     $(".image-carousel").slick(); 
     $(".zoom").elevateZoom(); 
    }); 
</script>