使用引导程序动态加载滑块

Question

我有以下设计的轮播滑块

第一张幻灯片的主图片较大（4 张较小）

第二张幻灯片分为 8 张较小的图片

附加的屏幕截图是使用引导程序构建的 - 类似这样的

<div class="item active">
	<div class="col-xs-6 grid-col">
		<img src="~/img01">
	</div>
	<div class="col-xs-3 grid-col">
		<img src="~/img02">
		<img src="~/img03">
	</div>
	<div class="col-xs-3 grid-col">
		<img src="~/img04">
		<img src="~/img05">
	</div>
</div>
<div class="item">
	<div class="col-xs-3 grid-col">
		<img src="~/img06">
		<img src="~/img07">
	</div>
	<div class="col-xs-3 grid-col">
		<img src="~/img08">
		<img src="~/img09">
	</div>
	<div class="col-xs-3 grid-col">
		<img src="~/img01">
		<img src="~/img02">
	</div>
	<div class="col-xs-3 grid-col">
		<img src="~/img03">
		<img src="~/img04">
	</div>
</div>

当然，这很容易！现在我需要动态加载我的图像，这要复杂得多.....

这就是我的剃刀标记目前的样子

<div class="listing-slider-grid">
    <div class="row grid-row" id="listingSlider">
        <div id="carouselListingSlider" class="carousel slide" data-ride="carousel" data-interval="4000">
            <div class="carousel-inner" data-toggle="modal" data-target=".carousel-modal">
                @foreach (var slide in Model.ListingSliderImages.ToArray().Split(8))
                {
                    <div class="item @(firstItemInSlider ? "active" : "")">
                        @foreach (var row in slide.ToArray().Split(4))
                        {
                            <div class="row">
                                @foreach (var item in row)
                                {
                                    <div class="col-xs-3">
                                        <img class="small-slider-img" src="~/images/optimisedImages/testing-slider-images/@item.ImageDefinition.Url">
                                    </div>
                                }
                            </div>
                        }                        
                    </div>
                    firstItemInSlider = false;
                }
            </div>
            <a class="left carousel-control" href="#carouselListingSlider" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carouselListingSlider" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
</div>

在屏幕上，两张幻灯片看起来像这样

还不错，但我还没有设法获得更大的图像（当没有足够的图像来填充完整的幻灯片时，我在滑块 2 上遇到了问题）。

在使用 Bootstrap 网格系统渲染列表时，我真的很困惑如何获得第一张大图像（我一直在使用这篇有用的文章 https://www.jerriepelser.com/blog/approaches-when-rendering-list-using-bootstrap-grid-system/）

有人有更好的想法吗？

谢谢，山姆

Answer 1

您应该在循环中设置异常以为该元素设置更多宽度（xs-6）：

<div class="row">
@foreach (var item in row)
{
    if([Your condition]) {
        <div class="col-xs-6">
            <img class="small-slider-img" src="~/images/optimisedImages/testing-slider-images/@item.ImageDefinition.Url">
        </div>
    } else { // Current behavior
        <div class="col-xs-3">
            <img class="small-slider-img" src="~/images/optimisedImages/testing-slider-images/@item.ImageDefinition.Url">
        </div>
    }
}
</div>

如果添加 xs-6，则必须修改行的其余部分，因此所有值都不会超过 12（每行的最大列数）