带有提升缩放功能的光滑旋转木马
Posted
技术标签:
【中文标题】带有提升缩放功能的光滑旋转木马【英文标题】:Slick Carousel with Elevate Zoom 【发布时间】:2015-07-24 16:02:02 【问题描述】:我有一个用于产品图像的轮播(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();
【问题讨论】:
您是否愿意使用其他 jQuery 插件进行轮播和缩放? 【参考方案1】:当改变时,
$('#slider-for').on('beforeChange', function(event, slick, currentSlide, nextSlide)
var img = $(slick.$slides[nextSlide]).find("img");
$('.zoomWindowContainer,.zoomContainer').remove();
$(img).elevateZoom();
);
页面加载
$('#slider-for .slick-current img').elevateZoom();
这是正确的。你可以试试。
【讨论】:
【参考方案2】:您可以使用下面给出的代码。
@
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>
【讨论】:
这不起作用。现在发生的只是当您单击图像而不是在页面加载时触发 elevateZoom。 你能给我你选择这个插件的链接吗?以上是关于带有提升缩放功能的光滑旋转木马的主要内容,如果未能解决你的问题,请参考以下文章
php woocommerce流行品牌旋转木马与光滑和自定义分类循环