Question

我对旋转木马滑块有以下设计

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

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

附带的屏幕截图是使用bootstrap构建的 - 类似这样的

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

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

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

我在使用Bootstrap网格系统渲染列表时如何获取第一张大图片时感到非常难过（我已经使用过这篇有用的文章https://www.jerriepelser.com/blog/approaches-when-rendering-list-using-bootstrap-grid-system/）

有没有人有更好的想法？

谢谢，Sam

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个值（每行最多列数）

使用bootstrap

1 个答案: