Dynamically loaded slider using bootstrap - html

Question

I have the following design for a carousel slider
The first slide has a larger main image (and 4 smaller)
The second slide is split between 8 smaller images
The screenshots attached were built using bootstrap - something like this
<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>
Of course that was easy! Now I need to dynamically load my images it's got a lot more complicated.....
This is how my razor markup looks currently
<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>
And on screen the two slides are looking like this
not too bad but I haven't managed to get that larger image in (and I have issues on slider two when there aren't enough images to populate a full slide).
I'm really stumped with how to get that first large image when rendering a list using the Bootstrap grid system (I've been using this helpful article https://www.jerriepelser.com/blog/approaches-when-rendering-list-using-bootstrap-grid-system/)
Does anyone have any better ideas?
Thanks, Sam

Answer 1

You should make exception in the loop to set more width (xs-6) for that element:
<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>
If you add an xs-6 you have to modify the rest of the row, so all of them never exceed 12 value (maximum columns per row)