jquery之将 JQuery Zoom 与 Bootstrap Carousel 结合使用

我正在尝试将 JQuery Zoom 插件( http://www.jacklmoore.com/zoom/ )与 Bootstrap Carousel 一起使用，以便轮播中的每个图像在悬停时都会在光标位置放大，但是在将两个插件添加在一起后我无法使缩放工作，轮播工作正常。

我相信这可能是轮播阻止悬停事件到达 Zoom 插件。

这是我的每个引导轮播项目的代码

<div class="item active"> 
    <span class='zoom'> 
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " /> 
    </span> 
</div> 

以及启动插件的 JS

<script type="text/javascript"> 
$(function () { 
    $('.carousel').carousel({ 
        interval: 99999, 
        pause: false 
    }); 
 
    $('.zoom').zoom({ on: 'click' }); 
}); 

提前致谢

--更新--

经过一番挖掘，我发现问题出在 img 响应部分，缩放范围大小为 0px、0px 并且不适合图像大小。我该如何解决这个问题？

--解决方案--

解决了问题，只需将span切换为div即可

<div class="item active"> 
    <div class='zoom'> 
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " /> 
    </div> 
</div> 

请您参考如下方法:

解决了问题，只需将span切换为div即可

<div class="item active"> 
    <div class='zoom'> 
         <img class="img-responsive" src="@Url.Content( Path.Combine( @"~", PathLocations.BrochureImages, page.FileName ) )" alt=" " /> 
    </div> 
</div>