1

製品画像用のカルーセル(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();
4

2 に答える 2

-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>
于 2015-05-13T12:26:34.783 に答える