Динамически загружаемый слайдер с помощью начальной загрузки

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>

И на экране два слайда выглядят так

не так уж плохо, но мне не удалось получить это увеличенное изображение (и у меня есть проблемы со слайдером два, когда не хватает изображений для заполнения полного слайда).

Я действительно озадачен тем, как получить это первое большое изображение при рендеринге списка с использованием системы сетки 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 (максимальное количество столбцов в строке)