Blueimp 轮播显示轮播及其下方的图像

Question

我在图库页面上实现了 blueimp 轮播 (2.22.0)。它工作正常，并在轮播中显示图像。但它也以准灯箱样式显示轮播下方的所有图像。这是我的代码。

<link href="~/Content/Css/blueimp-gallery.min.css" rel="stylesheet" />

<div class="page-header">
    <h2>@Model.Name</h2>
</div>


<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
<div id="links">

    @foreach (GalleryViewItemVM item in Model.Images)
    {
        <a href="@item.ImagePath" title="">
            <img src="@item.ThumbPath" alt="">
        </a>
    }
</div>


<script src="~/Scripts/blueimp-gallery.min.js"></script>

<script>
    blueimp.Gallery(
        document.getElementById('links').getElementsByTagName('a'),
        {
            container: '#blueimp-gallery-carousel',
            carousel: true
        }

    );
</script>

为了完整起见，我使用了剃刀和 bootstrap 3，尽管我认为这不相关。

Answer 1

<a> 标签中的 <img> 标签是不必要的，它会导致不需要的行为。

Blueimp 轮播显示轮播及其下方的图像

Blueimp carousel displays carousel and images below it

carousel

razor

blueimp

twitter-bootstrap-3